Неопытному пользователю или разработчику может показаться, что ссылка и кнопка мало чем отличается, что на самом деле является заблуждением. Да, современные подходы к внешнему виду кнопок и ссылок стёрли визуальную границу между этими элементами, но реакция браузеров на ссылки и кнопки всё ещё различна. Неверное использование элементов может привести к потере удобства, которое уже заложено на уровне браузеров.
Проблематика
Современный подход к дизайну веб-интерфейсов, зачастую основанный на концепции одновременной адаптации под классические компьютеры и пальцеориентированные (тачскрин) устройства, привёл к тому, что чисто визуально ссылку на плашке путают с кнопкой.
Кнопку и ссылку можно сделать абсолютно одинаковыми внешне и, возможно даже, интерфейс от этого не пострадает, но общая эргономика точно нарушится.
Второй момент — возможность повесить на ссылку выполнение javascript привело к тому, что ссылки зачастую и используют как альтернативу кнопкам, что неверно.
При выборе типа элемента необходимо отталкиваться от определения сущности элементов:
Кнопка (html тег <button> ) — это функциональный элемент, то есть элемент, отвечающий за выполнение определённой функции.
Ссылка (html тег <a> ) — это элемент навигации, то есть элемент, отвечающий за взаимосвязь разделов веб-ресурса (или разных ресурсов) между собой.
Ссылка-кнопка: что будет, если ссылку сделать функциональным элементом?
Ссылке можно задать javascript, который она должна выполнить, то есть из ссылки ( <a> ) при желании можно сделать функциональный элемент — кнопку.
Такая ссылка-кнопка не будет иметь корректного URL-адреса, поэтому при наведении курсора на ссылку-кнопку в окне браузера (внизу) выведется «javascript:;» или «ТекущийАдрес/#».
Браузер обработает ссылку-кнопку как ссылку и при правом клике предложит сохранить ссылку или поделиться ею, что, конечно, не имеет смысла, так как ссылка-кнопка не имеет корректного адреса.
У ссылки нет штатного состояния disabled (заблокирована), характерного для кнопок и отвечающего за блокировку кнопки до наступления каких-либо событий, которые переводят кнопку в активное состояние.
Думаю, что и поисковые системы не очень хорошо относятся к ссылкам-кнопкам —в любом случае полезной ссылочной массы они не рождают.
Кнопка-ссылка: что будет, если кнопку сделать навигационным элементом?
Кнопке можно передавать URL-адрес, то есть сделать из кнопки ( <button> ) ссылку.
Кнопка-ссылка не отобразит URL адрес при наведении на неё курсора мыши.
Кнопка-ссылка не позволит сохранить URL-адрес через контекстное меню.
Кнопка-ссылка не позволит открыть себя в новой вкладке (к примеру, зажав ctrl+левая кнопка мыши).
Кнопка или ссылка — решающие правила
Навигация между страницами — ссылка.
Навигация по якорям — ссылка.
Вызов всплывающего окна — чаще кнопка (ссылка, если дублировать всплывающее окно страницей, см. пример далее).
Функция управления, не имеющая своего URL-адреса, — кнопка.
Для примера рассмотрим функцию вызова окна входа на трёх сервисах совместных поездок: beepcar.ru, едем.рф и blablacar.ru.
beepcar.ru — правильно
Функция входа сделана в виде кнопки (хотя внешне похоже на ссылку), которая открывает на этой же странице окно для ввода регистрационных данных.
едем.рф — неправильно
Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом все прелести ссылки упущены.
blablacar.ru — правильно+
Функция входа сделана в виде ссылки (внешне тоже как ссылка), которая открывает на этой же странице окно для ввода регистрационных данных. Но при этом у blablacar.ru есть и отдельная страница для входа, ссылка на которую и представлена по ссылке «Войти», то есть остались все прелести ссылки.
Оформление ссылок и кнопок
Как показывает практика и кнопки, и ссылки могут иметь абсолютно одинаковое оформление (см. выше на примере кнопки и ссылки «Войти»). Всё чаще в навигации ссылки становятся похожи на кнопки за счёт использования плашек-подложек (и так лучше для навигации), в каноническом виде ссылки используются по ходу текста.
По большому счёту в оформлении ссылок и кнопок важно придерживаться лишь одного правила — оформление должно быть однотипным по всему проекту. При этом во фронт-части проекта внешний вид элементов может быть довольно далёк от канонического, но в разделе управления информацией (бэкэнд) я рекомендую придерживаться внешнего вида, близкого к каноническому (так удобнее для пользователей).
Есть классические кнопки, которые на формах ввода и поиска я рекомендую чаще оформлять как кнопки: Сохранить, Удалить, Найти.
Некоторые полезные советы по оформлению и использованию ссылок и кнопок можно найти в Контур.Гайды (от СКБ Контур): Ссылка, Кнопка