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

Question

[SashKK]

Здравствуйте, подскажите - стоит ли использовать тег button or input[type=button]
для создания кнопки? Или сейчас это делают с помощью ссылок?
Вопрос возник из-за того, что в дизайн макете кнопка имеет outline: none; но требуется, чтобы юзер мог переключаться между кнопками с помощью tab. А насколько я смог нагуглить, такое можно сделать при помощи ссылки.
Спасибо.

Comments

[Михаил]

если нужен переход на другую страницу — ссылка
преимущества input над button я не вижу никаких, так что всегда использую кнопки

Answer 1

[Арсений Матыцин]

С точки зрения JS (табы и все такое) абсолютно по барабану, что ты там наделаешь. Реакцию на табанье можно добавить.

С точки зрения адекватности:
1. Кнопки для того, что работает, как кнопка: клик → ответная реакция.
2. Ссылки для гиперссылок: нажал → попал на другую страницу (роут).

Или сейчас это делают с помощью ссылок?

Идиоты всегда бездумно использовали то, на что левая пятка зачешется. В целом button, как элемент, много удобнее input button.

Answer 2

[Дамир Балгабаев]

чтобы юзер мог переключаться между кнопками с помощью tab.

- таб индекс работает с кнопками и ссылками.
Если это форма: лучше использовать

input[type=button]

, если вы работаете с ипользованием фреймворка, то можно использовать и

button

и

input[type=button]

.

Comments

[SashKK]

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

[Михаил]

SashKK, ну так не ставьте outline: none и добавьте стили на hover/focus

[Дамир Балгабаев]

Тогда просто для кнопки и для ссылки добавить раные стили

[SashKK]

Михаил, на hover и focus уже стоят стили, которые тоже содержать outline:none;

[Дамир Балгабаев]

SashKK, Я правильно вас понял: у вас одинаковые стили на кнопке и на ссылке и теперь вы хотите чтобы они были разные по стилю?!

[SashKK]

Дамир Балгабаев, нет. У меня есть кнопка, я не могу решить - как ее сверстать. Либо при помощи button(input) без ссылок, либо просто сделать div под размер кнопки с сылкой внутри. Проблема в том, что в первом случае переход на кнопку по нажатию tab никак визуально не подсвечивается(outline:none стоит везде и в hover и в focus и в дефолтном стиле).
А второй случай я ни разу не использовал. У меня опыта не много и вот я не знаю, применяют ли такие штуки в реальной верстке. Надеюсь, понятно написал)
А, еще при нажатии кнопки должна отправляться форма.

[Михаил]

SashKK, www.outlinenone.com