Кнопка — может выступать не только как элемент какой-то формы для сайта, но также и в качестве ссылки для обмена обратными ссылками с другими сайтами. В данном посте попробуем создать кнопку и разместить ее html-код за несколько минут.

Обычная текстовая ссылка на сайте записывается с помощью тег-а <a> и выглядит она 









<a href="
http://darkghost.pp.ua/">DarkGhost — дизайн и создание сайта</a>

что в браузере будет иметь следующий вид

Но как сделать кнопку для сайта и чтобы она была привлекательной? О этом, подробнее.

Чтобы разместить на сайте кнопку нужно с помощью html-тега <button> записать 









<button>название для кнопки</button>

Текст на кнопке можно заменить на рисунок, для этого необходимо 








<button><img src="
http://darkghost.pp.ua/адрес картинки "></button>

Как такое может быть? Благодаря своим свойствам, к тегу <button> можно применять различные стили CSS. Возможно не только сделать текст жирным или курсивом, но также можно изменить фон кнопки, добавлять ей очертание и тд. Просто запишите ее настройки через style 









<button style="background: #000000; color: #FFFFFF"> название кнопки</button>

Кнопка также имеет свои особенные свойства, которые задаются с помощью таких параметров, как disabled, type, value. Не станем описывать подробно что и как и за что отвечает каждый параметр, но вкратце огласим, что

  • type – отвечает за тип кнопки и может быть обычной (button), или же кнопкой для подтверждения (submit), или же для очистки какой-то формы (reset)
  • value – задаем значение самой кнопки, которое служит для определения некоторым скриптом, сервером дальнейших действий после ее нажатия. Значение параметра value может быть одинаковым с названием самой кнопки, так и отличатся. Все последующие команды к будущим действиям передаются вместе с значением параметра name
  • и на тот случай, если нужно заблокировать, сделать кнопку не активной, используем параметр disabled 









<form action="file.php">







<div><button value="send" name="hidden" type="submit">Отправить </button></div>







</form>

Вернемся к нашей задачи – кнопка для обмена ссылками. В качестве примера, сделаем кнопку с надписью «Жми и заходи!»



 

Код представленной кнопки 









<form>







<input TYPE="button" style="background: #000000;







color: #FFFFFF" VALUE="Жми и заходи!" onclick="goHome()">







<script>function goHome(){location.href="http://darkghost.org.ua";}</script>







</form>

Для придания данной кнопке уникальности можно воспользоваться закруглением углов . Но это уже тема другого поста.