Создание функциональных кнопок

Иногда на сайте нужно реализовать некоторые функции, которые невозможно сделать "обычными" ссылками. В таких случаях могут помочь вот такие кнопки

Приведу примеры некоторых кнопок, разных по функциям и назначению.
Цели для кнопок можно придумать самые разные.

"Назад"
При нажатии на такую кнопку, перемещает пользователя на ранее посещенную страницу.

<input onclick="history.back(-1)"
value=" Назад (возвращает на предыдущую страницу)"
type="button">
 Текст на кнопке можно написать любой.

"Перезагрузка"
С помощью следующей кнопки можно перезагрузить текущую страницу.

<input onclick="ReloadButton()" 
value="Перезагрузить (перезагружает текущую страницу)" type="button">
<script>
function ReloadButton()
{location.href="index.html";} </script>
Не забудьте только в последней строчке кода прописать свою относительную ссылку.

"Ссылка"
В код кнопки можно ввнедрить любую ссылку. При наведении курсора на кнопку, пользователь не увидит адрес ссылки.

<input type="button" onclick="HomeButton()"value="LINKS (ссылка)" /> <script> function HomeButton(){location.href="http://www.workstart.ru/";} </script>

Сейчас в коде прописана ссылка главной страницы этого сайта

"Сообщение"
Эта кнопка может оповестить с помощью какого либо текста в специальном окне. Текст на кнопке и сообщении можно написать какой вздумается.

<input onclick="AlertButton()" value="Alert Message (выдает сообщение в окне предупреждения)" type="button"> <script>function AlertButton(){window.alert("Введите любое свое сообщение");}</script>

"Новое окно"
Открывает новое окно со строго заданными размерами, которые можно изменять как вым нужно. В данном случае откроется окно высотой 450 и шириной 600 пикселей.

<input onclick="NewWindow()" value="New Window (открывает новое окно)" type="button"> <script> function NewWindow(){window.open("http://workstart.ru","","height=450,width=600, status=no,location=no,toolbar=no,directories=no,menubar=no");} </script>

"Код страницы"
Если нажать на такую кнопку, то можно просмотреть полный код страницы, на которой установлена кнопка.

<input type="button" value="View Source (Посмотреть код страницы)" onclick=’window.location="view-source:"+window.location.href’ name="view" />

"Закрыть"
При клике на кнопке, текущее окно закроется

<INPUT onclick=window.close() type=button value="Кликните, чтобы закрыть окно">

Если вам не нравится внешний вид кнопок, то его легко можно изменить, применив стили.

Рассмотрим это на примере кнопки "Закрыть"
Фон кнопки сделаем голубой #B5E3F3
Шрифт Verdana размер 11 пикселей цвет синий #2783B4
Рамку тоже синего цвета #2783B4

В итоге получилась вот такая кнопка. Функция осталась прежняя, но визуально выглядит совершенно по другому.



Ниже код кнопки со стилями:

<INPUT onclick=window.close() style=" font-family: Verdana; font-size: 11px; color: #2783B4; border: 1px solid #2783B4; background:#B5E3F3;" type=button value="Кликните, чтобы закрыть окно">

 Таким же способом можно видоизменить все кнопки. Не забывайте в коде ставить свои ссылки.
Удачи


S