Кнопки в HTML: button, input и ссылка-кнопка — что выбрать

Поисковый запрос «как сделать кнопку в HTML» кажется элементарным, но на практике за ним скрывается важный выбор: использовать <button>, <input type='button'> или ссылку <a>, стилизованную под кнопку. От этого зависит доступность, поведение формы, удобство клавиатурной навигации и даже качество кода.

Короткий ответ: что выбрать

В большинстве случаев используйте <button>. Это современный, гибкий и семантически правильный элемент для действий на странице: открыть меню, отправить форму, показать модальное окно, переключить вкладку.

Базовая кнопка через button

Самый правильный способ сделать кнопку в HTML — использовать тег <button>. Внутрь можно помещать текст, иконки, <span> и другие строчные элементы.

<button type='button'>
  Открыть меню
</button>

Обратите внимание на type='button'. Это важная привычка. Если кнопка находится внутри формы и у неё не указан тип, браузер по умолчанию считает её кнопкой отправки формы.

Атрибут type: button, submit и reset

У <button> есть три основных типа:

<form action='/search' method='get'>
  <input type='search' name='q' placeholder='Поиск'>

  <button type='submit'>Найти</button>
  <button type='reset'>Очистить</button>
  <button type='button'>Подсказка</button>
</form>

Совет: всегда явно указывайте type. Это избавит от ошибки, когда кнопка «Открыть фильтр» внезапно отправляет форму.

Почему button лучше input type=’button’

Кнопку можно создать и через <input>:

<input type='button' value='Открыть меню'>

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

<button type='button'>
  <span aria-hidden='true'>☰</span>
  <span>Меню</span>
</button>

Поэтому для современной вёрстки почти всегда лучше использовать <button>.

Когда нужна ссылка, а не кнопка

Если элемент ведёт пользователя на другую страницу, к файлу, внешнему сайту или якорю на странице — это ссылка, даже если визуально она выглядит как кнопка.

<a class='button-link' href='/catalog'>
  Перейти в каталог
</a>

Не стоит делать переход через кнопку с JavaScript, если можно использовать обычный <a>. Ссылка понятна браузеру, поисковым системам, скринридерам и пользователям, которые открывают страницу в новой вкладке.

Правило выбора: действие или переход

Запомните простую проверку:

<!-- Правильно: действие -->
<button type='button'>Открыть корзину</button>

<!-- Правильно: переход -->
<a href='/cart'>Перейти в корзину</a>

Доступность: как сделать кнопку понятной

Хорошая HTML-кнопка должна быть понятна не только визуально. Если внутри есть только иконка, добавьте текст для вспомогательных технологий через aria-label.

<button type='button' aria-label='Закрыть окно'>
  <span aria-hidden='true'>×</span>
</button>

Если текст уже есть внутри кнопки, aria-label обычно не нужен:

<button type='button'>
  Закрыть окно
</button>

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

Отключённая кнопка: disabled

Чтобы сделать кнопку неактивной, используйте атрибут disabled. Такая кнопка не получает фокус и не отправляет форму.

<button type='submit' disabled>
  Отправка недоступна
</button>

Не имитируйте отключение только CSS-классом. Если кнопка действительно недоступна, это должно быть отражено в HTML.

Минимальная стилизация кнопки

HTML отвечает за смысл, но на практике кнопку почти всегда стилизуют. Вот простой пример CSS, который не ломает доступность:

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

<button class='button' type='button'>
  Добавить в избранное
</button>

Типичные ошибки новичков

Плохой и хороший пример

Плохой вариант: элемент выглядит как кнопка, но семантически ей не является.

<div class='button' onclick='openModal()'>
  Открыть окно
</div>

Хороший вариант: браузер сразу понимает, что это кнопка.

<button class='button' type='button' onclick='openModal()'>
  Открыть окно
</button>

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

Практическая рекомендация

Если вы только осваиваете HTML и вёрстку, заведите правило: сначала определяйте смысл элемента, а уже потом внешний вид. Кнопка — для действия, ссылка — для перехода. Такой подход помогает писать код, который проще поддерживать и развивать.

Если хочется не просто читать отдельные статьи, а собрать прочную систему знаний по HTML, CSS и адаптивной вёрстке, посмотрите практический курс «Вёрстка сайта с нуля 2.0» — он хорошо подходит тем, кто хочет научиться верстать полноценные страницы с нуля.

Итог

Чтобы правильно сделать кнопку в HTML, используйте <button> для действий, <a> для переходов и почти не используйте <input type='button'> без особой причины. Всегда указывайте type, не забывайте про доступность и не превращайте <div> в кнопку. Эти простые правила сразу делают разметку профессиональнее.

Источник