НТВ плюс 

Как сделать переход по кнопке в html. Учтите: «если кнопка не имеет валидного href, это просто элемент ». Однако все равно, кажется, лучше

Непосредственно кнопку нельзя сделать ссылкой, HTML запрещает комбинировать между собой элементы (а также ) и . Таким образом нельзя вкладывать кнопку в ссылку, а ссылку в кнопку. Есть три способа, как сделать так, чтобы при щелчке по кнопке происходило открытие веб-страницы.

Использование HTML

Кнопку вкладываем внутрь элемента и для формы указываем атрибут action с адресом веб-страницы (пример 1). Дополнительно можно добавить атрибут target со значением _blank , тогда веб-страница откроется в новой вкладке браузера.

Пример 1. Атрибут action

Кнопка Переход по ссылке

В этом примере при щелчке по кнопке открывается веб-страница new.html в новой вкладке.

Одну форму нельзя вкладывать внутрь другой. Перед добавлением кнопки убедитесь что у вас только одна форма.

Использование CSS

Раз кнопку нельзя сделать ссылкой, то вообще отказываемся от и стилизуем ссылку, чтобы она стала похожа на кнопку. В примере 2 показан класс btn , при добавлении его к элементу ссылка меняет своё оформление.

Кнопка .btn { display: inline-block; /* Строчно-блочный элемент */ background: #8C959D; /* Серый цвет фона */ color: #fff; /* Белый цвет текста */ padding: 1rem 1.5rem; /* Поля вокруг текста */ text-decoration: none; /* Убираем подчёркивание */ border-radius: 3px; /* Скругляем уголки */ } Переход по ссылке

Результат данного примера показан на рис. 1.

Использование JavaScript

Для перехода к указанной веб-странице можно воспользоваться событием onclick , добавляя его к элементу . Внутри onclick пишем document.location , а в качестве значения адрес желаемой веб-страницы (пример 3). Обратите внимание на комбинацию кавычек, адрес веб-страницы берётся в одинарные кавычки.

  • Tutorial





Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.


Для кого эта статья?

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


Во вторых для верстальщика к которому пришёл макет без состояний, чтобы было куда дизайнера послать.


В третьих чтобы вместо очередной тирады о разнице в кнопках\ссылках и нужности дизайна состояний, просто давать ссылку .


СсылкиВведение Ссылка которая кнопка



CSSДля наглядности - мой вариант велосипеда который выглядит странновато, но для примера сойдёт.

Обычная, наведение, клик, отключена соответственно.button - обычное состояние button { background: none; outline: none; border: none; text-transform: uppercase; } button:hover , button:focus - при наведении button:hover, button:focus { color: hsla(108, 12%, 0%, 1); box-shadow: -1px 1px 2px hsla(108, 62%, 42%, 1); background-color: hsla(108, 62%, 92%, 1) } button:active - в момент клика button:active { color: hsla(108, 42%, 32%, 1); box-shadow: -2px 4px 8px hsla(64, 64%, 42%, 1); background-color: hsla(64, 64%, 92%, 1); } button:disable - отключена button:disabled { color: hsla(0, 0%, 64%, 1); background: none; box-shadow: none; opacity: 1; } Пример посложнее


Показать CSS

button { margin: .8rem; font-size: 1.42rem; padding: 1rem; background: hsla(180, 90%, 64%, 1); color: hsla(180, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(180, 90%, 32%, 1); box-shadow: -4px 4px 0 0 hsla(180, 90%, 22%, .87), -3px 4px 3px hsla(180, 42%, 11%, 1), 1px 5px 4px hsla(180, 42%, 11%, 1), -4px 1px 0 0 hsla(180, 90%, 32%, 1), inset 0 0 1px 0 hsla(180, 90%, 90%, 1); border: 1px hsla(180, 92%, 56%, 1) solid; border-top-color: hsla(180, 92%, 64%, 1); border-radius: 5px; outline: none; position: relative; transition: all .22s ease-in; } button:hover { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); border: 1px hsla(420, 92%, 56%, 1) solid; border-top-color: hsla(420, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(420, 90%, 22%, .87), -3px 4px 3px hsla(420, 42%, 11%, 1), 1px 5px 4px hsla(420, 42%, 11%, 1), -4px 1px 0 0 hsla(420, 90%, 32%, 1), inset 0 0 1px 0 hsla(420, 90%, 90%, 1); } button:focus { background: hsla(108, 90%, 42%, 1); color: hsla(108, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 90%, 32%, 1); border: 1px hsla(108, 92%, 56%, 1) solid; border-top-color: hsla(108, 90%, 64%, 1); box-shadow: -4px 4px 0 0 hsla(108, 90%, 22%, .87), -3px 4px 3px hsla(108, 42%, 11%, 1), 1px 5px 4px hsla(108, 42%, 11%, 1), -4px 1px 0 0 hsla(108, 90%, 32%, 1), inset 0 0 1px 0 hsla(108, 90%, 90%, 1); } button:active { background: hsla(420, 90%, 42%, 1); color: hsla(420, 90%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 90%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 92%, 22%, 1) solid; border-top-color: hsla(420, 92%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 90%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 90%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 90%, 22%, 1); } button:disabled { background: hsla(420, 0%, 64%, 1); color: hsla(420, 0%, 12%, 1); text-shadow: 1px 1px 1px hsla(420, 0%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(420, 0%, 22%, 1) solid; border-top-color: hsla(420, 0%, 56%, 1); box-shadow: 0 0 0 0 hsla(420, 0%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); } button:disabled.in_ajax { background: hsla(108, 22%, 64%, 1); color: hsla(108, 22%, 12%, 1); text-shadow: 1px 1px 1px hsla(108, 22%, 32%, 1); transform: translate(-4px, 4px); border: 1px hsla(108, 22%, 22%, 1) solid; border-top-color: hsla(108, 22%, 56%, 1); box-shadow: 0 0 0 0 hsla(108, 22%, 22%, .87), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 hsla(420, 42%, 11%, 1), 0 0 0 0 hsla(420, 0%, 32%, 1), inset 1px 1px 4px 0 hsla(420, 0%, 22%, 1); }

ДизайнеруТы цээсэсов можешь и не знать, но состояния отрисовать обязан !

От дизайнера помимо макета с обычным состоянием ссылки или кнопки, требуется прилагать различные состояния, дабы не устраивать верстальщику батхерт.
Например так:





Спасибо

Спасибо, что дочитали. Всё здесь написаннное не является 100% истиной в последней инстанции.
Репозиторий

GitHub

Ссылка на репозиторий этой статьи . Если хотите дополнить или исправить, присылайте пожалуйста Pull Request


Только зарегистрированные пользователи могут участвовать в опросе. , пожалуйста.

Я хотел бы создать кнопку HTML, которая действует как ссылка. Таким образом, когда вы нажимаете кнопку, она перенаправляется на страницу. Я хотел бы, чтобы он был как можно более доступным.

Мне также понравится, чтобы в URL не было никаких дополнительных символов или параметров.

Как я могу это достичь?

Continue

но проблема заключается в том, что в Safari и Интернет   Explorer , он добавляет знак вопросительного знака в конец URL-адреса. Мне нужно найти решение, которое не добавляет никаких символов в конец URL-адреса.

Для этого есть два других решения: использование JavaScript или стилизация ссылки, чтобы выглядеть как кнопка.

Использование JavaScript:

Continue

Но для этого явно нужен JavaScript, и по этой причине он менее доступен для чтения с экрана. Пункт ссылки - перейти на другую страницу. Поэтому попытка заставить кнопку действовать, как ссылка, является неправильным решением. Мое предложение состоит в том, что вы должны использовать ссылку и стиль, чтобы он выглядел как кнопка .

Continue

27 ответов

HTML

Простой способ HTML состоит в том, чтобы поместить его в , в котором вы указываете желаемый целевой URL в атрибуте action .

При необходимости установите CSS display: inline; в форме, чтобы сохранить его в потоке с окружающим текстом. Вместо в приведенном выше примере вы также можете использовать . Единственное отличие состоит в том, что элемент позволяет детям.

Вы интуитивно ожидали бы, что сможете использовать , аналогичный элементу , но, к сожалению, нет, этот атрибут не существует в соответствии с Спецификация HTML .

CSS

Если CSS разрешен, просто используйте , который вы хотите выглядеть как кнопка, используя, помимо прочего, свойство appearance (только поддержка Internet поддержка браузера в настоящее время (июль 2015 г.) все еще плохая).

Go to Google a.button { -webkit-appearance: button; -moz-appearance: button; appearance: button; text-decoration: none; color: initial; }

Или выберите одну из этих многих библиотек CSS, таких как Bootstrap .

Go to Google

JavaScript

Если JavaScript разрешен, установите window.location.href .

Если это внешний вид кнопки, которую вы ищете в базовом теге привязки HTML, вы можете использовать Twitter Bootstrap для отформатируйте любую из следующих распространенных ссылок/кнопок типа HTML, чтобы они отображались в виде кнопки. Обратите внимание на визуальные различия между версиями 2, 3 или 4 рамки:

Link Button

Использование:

Click me

К сожалению, эта разметка больше не действительна в HTML5 и не будет проверять и не всегда работать как потенциально ожидаемая. Используйте другой подход.

Как и в случае с HTML5, кнопки поддерживают атрибут formaction . Лучше всего, не требуется Javascript или обман.

Go to Stack Overflow!

Предостережение

Это действительно очень просто и без использования каких-либо элементов формы. Вы можете просто использовать тег с помощью кнопки внутри:).

Click me !

И он загрузит href на ту же страницу. Хотите новую страницу? Просто используйте target="_blank" .

Если вы используете внутреннюю форму, добавьте атрибут type = "reset" вместе с элементом кнопки. Это предотвратит действие формы.

www.example.com

Единственный способ сделать это (за исключением изобретательной идеи BalusC!) - это добавить к кнопке JavaScript onclick событие, что не подходит для доступности.

Есть ли недостатки в выполнении следующих действий?

Schedule

Где a.nostyle - это класс, который имеет стиль вашей ссылки (где вы можете избавиться от стандартного стиля ссылок), а span.button - это класс, который имеет стиль для вашего "button" (фон, граница, градиент, и др.).

Идя вместе с тем, что добавили некоторые другие, вы можете сходить с ума только с помощью простого CSS-класса без PHP, no jQuery , просто HTML и CSS.

Создайте класс CSS и добавьте его в свой якорь. Код ниже.

Button-link { height:60px; padding: 10px 15px; background: #4479BA; color: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: solid 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); } .button-link:hover { background: #356094; border: solid 1px #2A4E77; text-decoration: none; } Press Here to Go

Вот и все. Это очень легко сделать и позволяет вам быть настолько креативным, насколько хотелось бы. Вы управляете цветами, размером, формами (радиус) и т.д. Для получения дополнительной информации см. сайт, на котором я нашел это .

Кажется, есть три решения этой проблемы (все с плюсами и минусами).

Решение 1: Кнопка в форме. Continue

Но проблема заключается в том, что в некоторых версиях популярных браузеров, таких как Chrome, Safari и Internet Explorer, он добавляет знак вопроса в конец URL-адреса. Таким образом, другими словами, для кода выше ваш URL-адрес будет выглядеть следующим образом:

Http://someserver/pages2?

Есть один способ исправить это, но для этого потребуется конфигурация на стороне сервера. Одним из примеров использования Apache Mod_rewrite было бы перенаправление всех запросов с завершающим? на их соответствующий URL без? . Вот пример использования.htaccess, но есть полный поток :

RewriteCond %{THE_REQUEST} \?\ HTTP RewriteRule ^/?(index\.cfm)? /?

Аналогичные конфигурации могут различаться в зависимости от используемого веб-сервера и используемого стека. Итак, резюме этого подхода:

  • Это настоящая кнопка, и семантически это имеет смысл.
  • Нет JavaScript, не требуется сложный стиль.
  • Трейлинг? выглядит уродливым в некоторых браузерах. Это может быть исправлено с помощью взлома (в некоторых случаях) с использованием POST вместо GET, но чистым способом является перенаправление на стороне сервера. Недостатком перенаправления на стороне сервера является то, что он вызовет дополнительный HTTP-вызов для этих ссылок из-за перенаправления 304.
  • Добавляет дополнительный элемент
  • Позиционирование элементов при использовании нескольких форм может быть сложным и ухудшается при работе с адаптивными проектами. Некоторое расположение может стать невозможным для достижения этого решения в зависимости от порядка элементов. Это может в конечном итоге повлиять на удобство использования, если на проект влияет эта проблема.
Решение 2: Использование JavaScript.

Вы можете использовать JavaScript для запуска onclick и других событий, чтобы имитировать поведение ссылки с помощью кнопки. Пример ниже может быть улучшен и удален из HTML, но здесь просто проиллюстрировать идею:

Continue

  • Простой (для базовых требований) и сохраняющий семантику, не требуя дополнительной формы.
  • Так как это настоящая кнопка, она также будет действовать как настоящая кнопка (например, перетаскиваемое поведение и/или имитировать щелчок при нажатии пробела при активном действии).
  • Требуется JavaScript, что означает менее доступный. Это не идеально подходит для базового (основного) элемента, такого как ссылка.
Решение 3: Якорь (ссылка), стилизованная как кнопка.

Если вы хотите избежать использования формы или ввода, и вы ищете ссылку на кнопку, вы можете создать красивые кнопки с помощью обертки div, привязки и тега h1 . Возможно, вам это захочется, чтобы вы могли свободно размещать ссылку на своей странице. Это особенно полезно для горизонтально центрирующих кнопок и с вертикально-центрированным текстом внутри них. Вот как:

Button!

Затем в CSS ваш стиль должен выглядеть так:

Link-button-wrapper { width: 200px; height: 40px; box-shadow: inset 0px 1px 0px 0px #ffffff; border-radius: 4px; background-color: #097BC0; box-shadow: 0px 2px 4px gray; display: block; border:1px solid #094BC0; } .link-button-wrapper > a { display: inline-table; cursor: pointer; text-decoration: none; height: 100%; width:100%; } .link-button-wrapper > a > h1 { margin: 0 auto; display: table-cell; vertical-align: middle; color: #f7f8f8; font-size: 18px; font-family: cabinregular; text-align: center; }

Link link

Button, button a{position:relative;} button a{top:0;left:0;bottom:0;right:0;}

@Nicolas, после работы для меня, как у вас, не было type="button" , из-за чего он начал вести себя как тип отправки. Так как у меня уже есть один тип submit.it, это не сработало для меня.... и теперь вы можете либо добавить класс к кнопке, либо , чтобы получить требуемый макет:

Click here

Если вы хотите создать кнопку, которая используется для URL-адреса в любом месте, создайте класс кнопки для привязки.

A.button { background-color: #999999; color: #FFFFFF !important; cursor: pointer; display: inline-block; font-weight: bold; padding: 5px 8px; text-align: center; -webkit-border-radius: 5px; border-radius: 5px; } .button:hover { text-decoration: none; }

Я знаю, что было подано много ответов, но никто из них, похоже, не справился с проблемой. Вот мой подход к решению:

  • Используйте метод , с которого начинается OP. Это работает очень хорошо, но иногда добавляет? к URL-адресу. Главной проблемой является? .
  • Используйте jQuery/JavaScript для выполнения следующей ссылки, когда JavaScript включен, поэтому? не добавляется к URL-адресу. Он будет без проблем возвращаться к методу для очень небольшой доли пользователей, у которых нет JavaScript.
  • В JavaScript-коде используется делегирование событий, поэтому вы можете присоединить прослушиватель событий до того, как существуют или . В этом примере я использую jQuery, потому что это быстро и просто, но это можно сделать и в "vanilla" JavaScript.
  • Код JavaScript предотвращает действие по умолчанию, а затем следует ссылку, указанную в атрибуте action .
Пример JSBin (фрагмент кода не может следовать ссылкам)

// Listen for any clicks on an element in the document with the `link` class $(document).on("click", ".link", function(e) { // Prevent the default action (e.g. submit the form) e.preventDefault(); // Get the URL specified in the form var url = e.target.parentElement.action; window.location = url; }); Form buttons as links Link

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

1. Кнопка в виде изображения

Это самый простой подход к созданию кнопки в виде ссылки на сайте. Для этого Вам понадобится всего лишь найти подходящую картинку для кнопки. Например, картинка с Вашей кнопкой называется button.jpg . Тогда, для создания ссылки код должен быть следующим:

... ...

Вот во что он превращается на странице сайта:

Это самый элементарный вариант. Советую прочитать про тег и тег , чтобы настроить кнопку именно под Ваши требования.

Кстати, для создания изображений для кнопок есть специальный сайт: http://dabuttonfactory.com/ . Здесь можно бесплатно создать кнопку по Вашему вкусу (задать стиль, выбрать изображение, написать подходящий текст и т.п.).

2. Кнопка с помощью HTML тега

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

... ...

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

Вместо URL1 и URL2 надо написать адреса страниц, куда необходимо осуществить переход. Если Вы хотите, чтобы ссылки открывались в новых вкладках (аналог атрибута target="_blank" у тега a), то вместо onclick="javascript:window.location="..."" нужно прописать onclick="javascript:window.open="..."" (заменить location на open).

Я почти уверен, что Вам захочется оформить кнопку как-то по другому (под дизайн своего сайта). Для этого введем класс btn:

.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 ; }

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

Вы используете его, хм … ну, когда хотите разместить на странице кнопку, по которой пользователь может кликнуть, не так ли? К сожалению, все немного сложнее. В принципе это близко к истине, но давайте изучим вопрос глубже.

Сам элемент выглядит таким образом:

Сделать что-нибудь

Что является самым распространенным результатом клика на что-нибудь на веб-сайте? Переход на новый URL-адрес, как если бы вы нажали ссылку (элемент ).

Элемент сам по себе, не может этого сделать. Было много разговоров о том, чтобы разрешить «href везде », но ничего из этого так и не вышло.

При нажатии на кнопку действительно производятся определенные действия, если используется соответствующий контекст…

Кнопка – это элемент формы

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

Элемент в оболочке , по умолчанию, ведет себя именно так, как и показано выше.

Submit

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

Reset

Нажатие на эту кнопку приведет к удалению всех других полей ввода (и текстовых областей) из родительского блока .

Кнопки могут содержать контент

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

Подтвердить

Пока будет сохраняться, этот смешанный контент будет отображаться на экране.

Насколько я могу судить, не существует особых ограничений относительно того, что вы можете разместить внутри кнопки, так что вы можете поместить туда что угодно, создав действительно причудливые кнопки. Возможно использование также и псевдо элементов.

Давайте оставим пока тему стилей для , хотя разные браузеры обычно имеют специальные стили, которые применяются к кнопкам. Если захотите, вы можете оставить стили, применяемые браузерами, или же полностью удалить их, и тогда ваш стиль по умолчанию будет заменять стили браузеров.

Учтите: «если кнопка не имеет валидного href, это просто элемент »

Помните, раньше я писал, что эта тема доставляет мне истинное наслаждение . Это то, что вдохновило меня на написание данной статьи. Я представлял себе, какое удовольствие получу, рассматривая различные казусы. Как, например:

Меня уже достали такие кнопки.

Скорее всего, выше приведенный код означает что-то типа: Я собираюсь кликнуть кнопку, чтобы сделать что-то с JavaScript. Так или иначе, это, кажется, лучше, чем использовать обычный , потому что вы получаете возможность изменения вида курсора и все остальные стили по умолчанию.

Вне я бесполезна.

Однако все равно, кажется, лучше

Даже если ничего не делает, находясь за пределами , этот элемент все равно, по-моему, лучше использовать для прочих действий, которые не требуют перехода на другую страницу. Во всяком случае, они лучше, чем фиктивные ссылки.

Хорошо. Давайте вставим JavaScript

Это, наверное, лучшее решение. Если JavaScript требуется для любых действий связанных с кликами, то для элемента в принципе можно обходиться и без запуска JS.

Но мы можем сделать следующее:

// 1. Создаем кнопку var button = document.createElement("button"); button.innerHTML = "Do Something"; // 2. Размещаем ее var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Добавляем обработку действия button.addEventListener ("click", function() { alert("did something"); });

Вы можете легко сделать «кнопку добавления » частью рабочего процесса JavaScript.

Когда целесообразнее использовать ссылки

Если у вас есть какие-нибудь гипертекстовые переходы на другие страницы, то целесообразнее оформлять их ссылкой, чтобы можно было использовать анкор. Даже если вы переназначаете ее поведение через JavaScript.

Это прогрессивное улучшение в лучшем его применении. Например:

  • Кнопка поиска обычно порождает запуск поисковых сценариев Ajax — в то время как ссылка просто может указывать на страницу поиска;
  • Кнопка «опубликовать » запускает следующий шаг публикации чего-то, что нужно пользователю — но ссылка может просто вести на страницу / опубликовать /;
  • Кнопка с миниатюрой изображения открывает отдельную панель, на которой выводится изображение в большем размере — а ссылка может просто указывать URL-адрес этого увеличенного изображения.

Если ничего больше не подходит, вставляйте кнопку с JavaScript.

Связанные проблемы

У вас может получиться что-то похожее на то, что получилось у меня!

Я в порядке

Но вы сами еще не совсем в порядке. MDN подробно рассматривает данную проблему :

Обратите внимание: Будьте осторожны при разметке ссылок с функциями кнопки. Действия кнопки, как правило, вызываются с помощью клавиши «Пробел », в то время как действия ссылок вызываются через клавишу Enter.

Также необходимо будет добавить ключ обработчика действий, который будет реагировать на нажатие клавиши «Пробел », чтобы обеспечить соответствие с оригинальной кнопкой.

Ну что ж, на этом все. И хм… делайте интерактивные вещи правильно.

Перевод статьи «When To Use The Button Element » был подготовлен дружной командой проекта .