Кнопка с ссылкой

Кнопка с ссылкой

HTML ссылка как кнопка

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:

1 <a href=»http://6vl.ru/»><img src=»knopka.jpeg»></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

1 2 3 4 5 6 7 a { -moz-appearance: button; -webkit-appearance: button; padding: .2em .75em; text-decoration: none; }
1 <a href=»http://6vl.ru»>ССЫЛКА на 6vl.ru</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

1 способ:
В атрибут «action» поместите URL-адрес, на который должна вести «кнопка»:

<form action=»ВАША_ССЫЛКА_НА_СТРАНИЦУ » method=»GET»> <input type=»submit» value=»Кнопка» /> </form>

2 способ:
Также можно использовать HTML события:

<input value=»Кнопка» type=»button» onclick=»location.href=’ВАША_ССЫЛКА_НА_СТРАНИЦУ'» />

3 способ:
Тоже взят из HTML события, только другим способом:

<script type=»text/javascript»> function BlogGood() { location.href=’https://bloggood.ru/’; } </script> <input value=»Кнопка» type=»button» onclick=»BlogGood()» />

BlogGood() – это название функции вы можете назвать по своему.

Теперь сделаем так, чтобы ссылка отображалась, как кнопка .

1 способ:
Самое простое решение – это нарисовать кнопку и обхватить ее тегами ссылки <a>:

<a href=» ВАША_ССЫЛКА_НА_СТРАНИЦУ «><img src=»knopka.jpeg»></a>

2 способ:

Можно использовать особое правило в CSS «-moz-appearance и -webkit-appearance» со значением «button» :

a { -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Chromium */ padding: .2em .75em; text-decoration: none; } <a href=»https://bloggood.ru»>ССЫЛКА на BLOGGOOD.RU</a>

3 способ:

Вы можете в CSS прописать свои стили для кнопки.
Выглядеть это будет вот так:

.ssilka { border:1px solid #ccc; // рамка background:#eaeaea; //фон padding: .2em .75em; //отступы внутри text-decoration: none; //убрать подчеркивание ссылки }>Как сделать кнопку на сайте ссылкой

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

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 цветов для сайта

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=»submit»:

<form action=»/example/»>
<button type=»submit»>Кнопка-ссылка</button>
</form>

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.

Демо

«Живая» демонстрация такой кнопки-ссылки:

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.

Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:

Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.

Chromium/Blink и WebKit

В браузерах на основе движков Chromium / Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

<form action=»/example/»>
<button type=»submit»>Кнопка-ссылка</button>
</form>

приведёт на адрес /example/? вместо правильного /example/.

Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.

Ограничения по сравнению с реальной ссылкой

  • У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
  • Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *