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

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

Цели для кнопок можно придумать самые разные.

"Назад"

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

Текст на кнопке можно написать любой.

"Перезагрузка"

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

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

Не забудьте только в последней строчке кода прописать свою относительную ссылку вместо /lessons/lessonsraznoe/sozdanie-funkcionalnyx-knopok.html

"Ссылка"

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

<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>

"Код страницы"

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

"Закрыть"

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

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

Фон кнопки сделаем голубой #B5E3F3

Шрифт Verdana размер 11 пикселей цвет синий #2783B4

Рамку тоже синего цвета #2783B4

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

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

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

Удачи

метки: кнопки

Добавить эту страницу в закладки:

WorkStart.ru