Как сделать кнопку ссылкой
Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.
Правильно
Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type=:
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/.
Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM:
<form action="/example/" target="_blank">
Демо
Строка запроса
Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value (имя=значение), разделённых символом &.
Если адрес, на который должна указывать ссылка, содержит строку запроса, следует для каждого GET-параметра добавить в форму скрытое поле с соответствующими атрибутами name и value:
<form action="/example/">
<input type="hidden" name="foo" value="bar" />
<input type="hidden" name="lorem" value="ipsum" />
<button type="submit">Кнопка-ссылка</button>
</form>
Данная форма ведёт на страницу /example/?foo=bar&lorem=ipsum.
Chromium/
В браузерах на основе движков Chromium/
<form action="/example/">
<button type="submit">Кнопка-ссылка</button>
</form>
приведёт на адрес /example/? вместо ожидаемого /example/.
Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим спецификациям HTML и URL.
Обойти это можно с помощью автоматического серверного перенаправления (редиректа) с адреса, оканчивающегося вопросительным знаком, на такой же адрес без воспросительного знака.
Ограничения по сравнению с реальной ссылкой
- У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
- Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.
Неправильно
Кнопка внутри ссылки
Нередко элемент BUTTON просто помещают внутрь ссылки:
<a href="/example/"><button>Кнопка-ссылка</button></a>
Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.
Демо
Кнопка с JS-обработчиком щелчка
Порой используется кнопка с JavaScript-обработчиком события щелчка:
<button>Кнопка-ссылка</button>
Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.
Демо
Нестандартные расширения CSS
Описанные ниже возможности нестандартные, и использовать их не рекомендуется.
Firefox и Chromium
Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance, значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:
A.example {
-moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
}
Демо
Мелодичная инструментальная музыка
Internet Explorer, Edge и спецификация
В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна.
В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.
3 способа сделать ссылку кнопкой с помощью HTML
При создании сайтов с нуля и на конструкторе один из частых вопросов – как сделать кнопку с сcылкой, не используя сложных кодов, программирования, Java Script, посредством одного html. Есть несколько способов сделать элемент, при нажатии на который происходит переход на определенную страницу.
На любом сайте – визитке, информационном, магазине, лендинге – пользователи должны совершить необходимое действие. Интуитивно понятный элемент действия – кнопка. Ее используют, чтобы призвать посетителя сайта совершить важное действие: купить, отправить, скачать, войти и т.п.
Другая часть интерфейса – ссылки, их гораздо больше, чем кнопок. В виде простого текста (<a href=»адрес»>Ссылка</a>) они выглядят неприглядно, не всегда соответствуют дизайну. Основное правило оформления ссылок: пользователь должен понять, что перед ним не обычный текст без наведения мышью.
Кнопка и ссылка – разные понятия в html. Первая запускает какой-то процесс, вторая перенаправляет куда-либо.
Пример: оплата в интернете. Человек вводит номер карты в поле и нажимает «Оплатить». Нажатием запускается команда, написанная языком программирования: формируется запрос в банк, деньги списываются со счета. Если поля для заполнения останутся пустыми, при нажатии ничего не произойдет. Пользователь останется на том же месте, не произойдет никаких действий. Команда сработает только при соблюдении необходимых условий. То же произойдет при заполнении данными полей анкет, онлайн-калькуляторов, тестов. В этом случае это элемент <button>.
HTML запрещает комбинировать между собой <button> и <a>. Несмотря на это есть способы открытия страницы при нажатии на <button>.
Вложить <button>внутрь элемента <form> в html
Использовать JavaScript. Добавить к элементу <button> событие onclick, внутри него вписать document.location, значением будет адрес веб-страницы.
<button>Переход по ссылке</button>
Заставить кнопку действовать, как ссылка – нерациональное решение. Это перегружает код и повышает вероятность ошибок.
Если нужно перенаправить человека на другую страницу, линк стилизуют под кнопку. Для этого используют CSS.
CSS
Это не язык программирования, а формальный язык для описания оформления внешнего вида HTML-документа.
Объектам придают практически любой вид при помощи html и эффектов CSS:
— Градиентная заливка
— Тень
— Изменение форм и размеров
— Оформление ссылки картинкой
— Перенаправление на телефонный номер или мессенджер
— Меню-аккордеон (Сворачивающееся и разворачивающееся)
— Выпадающее меню
— Опции «Назад», «Вернуться вверх»
— Hover -эффекты (инверсия, изменение цвета и прозрачности, изменение размера, расположения объекта и многое другое)
Как сделать ссылку кнопкой
1. Чистый html
Линк маскируется под кнопочку следующим образом:
1)Создать стандартный линк и указать адрес к стилям
2)Прописать стили, которые преобразуют линк в привычный прямоугольник:
<a>{
padding: 10px 10px;/* отступы от букв до краев */
text-decoration: none;/* убирает подчеркивание */
}</pre>
Каждая ссылка на странице станет выглядеть как кнопка.
2. Html/CSS
Все практически как в первом способе. Но не используем стили «по умолчанию», а рисуем вокруг текста линка обводку, фигуру, заливку цветом, чтобы он стал похожим на кнопку. Этот метод индивидуален для каждой ссылки.
Нужно придумать и написать стиль:
<pre><link rel=»stylesheet» href=»link_button_3.css»>
<a href=»https://site.ru»>Ваша ссылка</a></pre>
<pre>.ssilka{ border:1px solid #ccc; /*рамка*/
background:#eaeaea; /*фон*/
padding: 10px 10px; /*отступы внутри*/
text-decoration: none; /*убрать подчеркивание*/ }</pre>
3. Добавить дизайн
В дизайне многостраничника, интернет-магазина, лендинга для Инстаграм в качестве кнопки используют фотографии, картинки, нарисованные в Фотошопе. Чтобы при клике на изображение срабатывал переход по ссылке, нужно:
Обернуть картинку тегом:
<pre><a href=»site.ru»><img src=»button.png»></a></pre>
Сохраняйте исходники кнопок, нарисованных в графическом редакторе.
Если понадобится изменить информацию, придется рисовать заново.
Примеры использования
Последний метод применим при создании лендинга для Инстаграм в конструкторе Hipolink.net.
В разделе «Фото» можно вставить изображение, в настройках добавить к нему url. Клик на картинку переведет в магазин, другой раздел, сайт. Так картинка или фотография станут кнопкой.
Создание ссылок в виде кнопок предусмотрено одноименным разделом.
Знания html не понадобится: настройки интуитивно понятны для неопытного пользователя. Бесплатный тариф предоставляет опции редактирования формы и размера кнопок. На тарифах «Personal» и «Business» доступно изменение цвета, добавление иконок.
Как создать HTML-кнопку, действующую как ссылка | by W3docs
Иногда нам нужно создать HTML-кнопку, которая действует как ссылка (т. е. при нажатии на нее пользователь перенаправляется на указанный URL-адрес).
Есть несколько методов, мы представим 3 из них. Выберите один из следующих способов, чтобы добавить ссылку на кнопку HTML.
Хорошо. Пойдем!
а) В тег HTML
Пример
Название документа
Попробуйте сами
Это может не сработать, если кнопка находится внутри тега
b) Для тега внутри HTML-элемента
Попробуйте сами
Ссылки не будут работать при отключенном JavaScript, и поисковые системы могут игнорировать такие ссылки.
а) Атрибут действия
Название документа
w3docs.com/"> Попробуйте сами
Чтобы открыть ссылку в новой вкладке, добавьте атрибут target=»_blank».
Название документа
Попробуйте сами
Поскольку формы нет и данные не отправляются, это может быть семантически некорректным. Тем не менее, эта разметка действительна.
b) Атрибут формы HTML5.
Пример
Название документа
Попробуйте сами
Атрибут formaction используется только для кнопок с типом = «отправить».
Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой.
Поскольку этот атрибут специфичен для HTML5, его поддержка в старых браузерах может быть плохой. Пример
Название документа
Нажмите здесь
Попробуйте сами
Как сложно требуется стиль, это может не работать в определенных браузерах.
Как создать HTML-кнопку, действующую как ссылка?
Мэтью К.
Проблема
У вас есть кнопка, которую вы хотите использовать в качестве ссылки на своем веб-сайте.
Как сделать, чтобы кнопка, которая обычно используется для выполнения действия, такого как отправка формы или открытие меню, действовала как ссылка?
Решение
Вы можете сделать так, чтобы кнопка действовала как ссылка или чтобы ссылка выглядела как кнопка.
Оберните кнопку тегом ссылки
Вы можете обернуть кнопку тегом , чтобы она действовала как ссылка:
Проблема с этим решением заключается в том, что если вы запустите этот HTML-код через службу проверки разметки W3C, вы получите следующее сообщение:
Ошибка: кнопка элемента не должна отображаться как потомок элемента a. Нажмите, чтобы скопировать
Этот код не подходит для специальных возможностей. Если пользователь осуществляет навигацию с помощью своей клавиатуры, сначала фокусируется ссылка, а затем фокусируется кнопка.
Это может ввести пользователя в заблуждение. Кроме того, кнопка может активироваться клавишей ввода или пробелом, когда она находится в фокусе. Ссылка, которая находится в фокусе, будет ссылаться на новое местоположение, только если нажата клавиша ввода. Ничего не произойдет, если нажать пробел. Если ссылка выглядит как кнопка, пользователь может ожидать, что пробел будет работать. Вы можете исправить это, добавив прослушиватель событий пробела к ссылке и перейдя на новую страницу, используя следующую строку кода JavaScript:
window.location.href = "https://sentry.io/answers/"; Щелкните, чтобы скопировать
Это не идеально, так как требует дополнительного кода, который вы легко можете забыть добавить.
Кроме того, если вы используете ссылку в качестве кнопки, вы должны переопределить ее роль с помощью атрибута роли ARIA:
Это гарантирует, что если пользователь использует программу чтения с экрана, программа чтения с экрана объявит, что элемент является ссылкой.
Стилизация ссылки в виде кнопки
Другой вариант — вообще не использовать кнопку и оформить тег так, чтобы он выглядел как кнопка с помощью CSS:
Ответы Сентри Нажмите, чтобы скопировать
Вы можете добавить стили, используя класс CSS, например класс «btn» в приведенном выше коде. Он может иметь следующие простые стили:
.btn { текстовое оформление: нет; набивка: 0,5 бэр; граница: 1px сплошная #333333; } Нажмите, чтобы скопировать
Это решение не самое лучшее, поскольку ссылки и кнопки используются для разных целей:
- Ссылки используются для перехода пользователя в новое место. Это может быть новая веб-страница или другой раздел текущей страницы.
- Кнопки запускают действие, например отправку формы или открытие меню.
Добавить кнопку внутри формы
Вы можете добавить кнопку внутри формы и добавить URL-адрес ссылки в форму действие атрибут:
Вы также можете установить для атрибута кнопки type значение «reset» и использовать атрибут onclick для изменения местоположения: