00:20 Как сделать кнопку на сайте ссылкой | |
Как сделать кнопку на сайте ссылкойСуществует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них. 1. Кнопка в виде изображенияЭто самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg. Тогда, для создания ссылки код должен быть следующим: <body> ... <a href="URL"><img src="button.jpg"></a> ... </body> Вот во что он превращается на странице сайта: Это самый элементарный вариант. Советую прочитать про тег a и тег img, чтобы настроить кнопку именно под Ваши требования. Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/. Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.). 2. Кнопка с помощью HTML тега formЭтот вариант также является одним из методов создания кнопки в виде ссылки. Приведу элементарный пример кнопки созданной с помощью тега form и input: <body> ... <form> <input type="button" value="Просто кнопка" onclick="javascript:window.location='URL1'"/> <input type="button" value="Ещё одна кнопка" onclick="javascript:window.location='URL2'"/> </form> ... </body> Вот как это примерно будет выглядеть на странице: Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location='...'" нужно прописать onclick="javascript:window.open='...'" (заменить location на open). Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn: <head> ... <style> .btn { //Задание общего стиля для кнопки height:30px; border-color:#c2e254 #9bb838 #9bb838 #c2e254; border-style:solid; border-width:1px; background:#c2e254; cursor:pointer; } .btn:hover { //Стиль кнопки при новедении на него курсора border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66; border-style:solid; border-width:1px; background:#FFFF99; } .btn:focus { //Стиль кнопки, когда она в фокусе background:#ddd; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; } .btn:active { //Стиль кнопки при нажатии background:#ff0000; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; } </style> ... </head> <body> ... <form> <input type="button" value="Просто кнопка" class="btn" onclick="javascript:window.location='URL1'"/> <input type="button" value="Ещё одна кнопка" class="btn" onclick="javascript:window.location='URL2'"/> </form> ... </body> После этого кнопка будет выглядеть следующим образом на странице: .btn { height:30px; border-color:#c2e254 #9bb838 #9bb838 #c2e254; border-style:solid; border-width:1px; background:#c2e254; cursor:pointer; } .btn:hover { border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66; border-style:solid; border-width:1px; background:#FFFF99; } .btn:focus { background:#ddd; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; } .btn:active { background:#ff0000; border-color:#ddd #333 #333 #ddd; border-style:solid; border-width:1px; } Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег style. | |
| Категория: Все о сайтах | Просмотров: 314 | | |
| Всего комментариев: 0 | |