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

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

"Назад"

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

 

 

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

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

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

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

 

 

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

 

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

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

 

 

<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="Кликните, чтобы закрыть окно">

 

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

Удачи

 

 


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