Как сделать кнопку на сайте ссылкой

Существует два подхода к созданию кнопки на сайте в виде ссылки. Рассмотрим подробно каждый из них.

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>

После этого кнопка будет выглядеть следующим образом на странице:






Мы разобрали 2 подхода к решению задачи создания кнопки на сайте. Обычно все используют первый подход, поскольку заморачиваться с input никто не хочет. Более подробно об стилях можно прочитать в статье: тег <style>.



Читайте также:

• Кнопка html

• Как изменить вид ссылки при наведении

• Как сделать иконку для сайта

• Как добавить кнопку "Наверх" на сайте

• Как сделать якорь ссылки

• Как сделать форму обратной связи на php с каптчей

• Коды символов для HTML

• Коды и названия html цветов для сайта

← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.