0 ∞

Как сделать кнопку в HTML и кнопку-ссылку

Кнопка в HTML создается тегом <button> или <input> с подходящим типом. Для перехода по адресу используйте ссылку <a href="…">, оформленную через CSS. Выбор тега определяет поведение элемента в форме и работу с клавиатуры. Готовые примеры помогут добавить навигацию, отправку формы, иконку и обработчик нажатия.

АР

Алина РыбакОбновлено 28 октября 2026 9 мин чтения ∞

Как сделать кнопку в HTML: теги button и input
Атрибут type: submit, button, reset
Когда выбирать кнопку, а когда ссылку
Кнопка-ссылка и кнопка «Наверх»
Как отправить и сбросить форму
Кнопка с картинкой
Как оформить кнопку через CSS
Как обработать нажатие на кнопку
Доступность кнопок
Ошибки при верстке кнопок

Как сделать кнопку в HTML: теги button и input

Добавьте <button type="button"> и напишите название между тегами. Альтернативный вариант – <input type="button"> с надписью в атрибуте value.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Два способа создать кнопку</title>
</head>
<body>
  <button type="button">Открыть настройки</button>
  <input type="button" value="Открыть настройки">
</body>
</html>

Сохраните код в файле buttons.html с кодировкой UTF-8. Откройте файл браузером. Страница покажет 2 кнопки с одинаковой надписью.

Пока нажатие ничего не меняет. Тип button сам не задает действие.

Элемент <button> допускает вложенную разметку, например текст, картинку или SVG. Элемент <input> не содержит дочерних элементов. У input type="button" подпись задается только через value.

Для новых проектов выбирайте <button>, поскольку его содержимое проще дополнять иконками.

Оба способа подходят для обычной текстовой кнопки. Атрибуты описаны в документации MDN для button и input type="button".

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

Атрибут type определяет назначение кнопки. Обычный <button> внутри формы без указанного типа отправляет форму. Поэтому всегда задавайте type явно, включая кнопки раскрытия меню.

Тег и тип	Внутри формы	Вне формы без связи с ней
`<button type="submit">`	Запускает отправку формы с проверкой полей	Не отправляет форму
`<button type="button">`	Не выполняет встроенного действия	Не выполняет встроенного действия
`<button type="reset">`	Возвращает полям исходные значения	Не сбрасывает форму
`<button>` без типа	Работает как кнопка отправки	Не отправляет форму
`<input type="submit">`	Запускает отправку формы с проверкой полей	Не отправляет форму
`<input type="button">`	Не выполняет встроенного действия	Не выполняет встроенного действия
`<input type="reset">`	Возвращает полям исходные значения	Не сбрасывает форму

Внешняя кнопка может управлять формой через атрибут form. Его значение должно совпадать с id формы. Тогда расположение кнопки за пределами <form> не мешает отправке.

disabled отключает кнопку. Пользователь не может активировать ее или выбрать клавишей Tab. Атрибут логический, поэтому даже запись disabled="false" отключит элемент. Для включения удалите атрибут.
name и value задают имя и значение кнопки отправки. Браузер включает эту пару в данные при отправке через эту кнопку.
form связывает кнопку с формой по ее идентификатору.
formaction задает адрес отправки для конкретной кнопки отправки. Атрибут переопределяет action связанной формы.

<form id="search-form" method="get">
  <label for="query">Поисковый запрос</label>
  <input id="query" name="q" type="search" required>
</form>

<button type="submit" form="search-form" name="mode" value="all">
  Найти
</button>
<button type="button" disabled>Поиск недоступен</button>

Введите слово «кнопка» и нажмите «Найти». Страница откроется с параметрами q и mode=all в адресе.

Без атрибута action форма отправляет данные на текущую страницу. Поисковую выдачу этот учебный пример не создает.

Когда выбирать кнопку, а когда ссылку

Ссылка <a href="…"> переводит посетителя на другой адрес или к якорю. Кнопка <button> запускает действие, например отправляет форму, открывает меню, переключает содержимое. CSS может сделать эти элементы внешне одинаковыми, но их назначение сохранится.

Для перехода в каталог используйте <a href="/catalog/">.
Для перехода к началу страницы используйте ссылку с href="#top".
Для показа блока используйте <button type="button">.
Для отправки полей используйте <button type="submit">.

Не заменяйте кнопку элементом <div> с обработчиком клика. У него нет встроенной клавиатурной активации и семантики кнопки. Элемент <a> без href тоже не создает полноценную ссылку. Выбирайте подходящий тег сразу, чтобы не восстанавливать его поведение вручную.

Кнопка-ссылка и кнопка «Наверх»

Кнопка-ссылка – обычная ссылка с отступами, фоном и скруглением.

Для перехода внутри страницы присвойте целевому элементу уникальный id. Атрибут name у <a> устарел; якорю достаточно идентификатора заголовка или другого элемента.

<style>
  html {
    scroll-behavior: smooth;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 18px;
    border-radius: 8px;
    background: #174ea6;
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .btn:hover {
    background: #103b80;
  }

  .btn:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
  }

  .demo-space {
    min-height: 120vh;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
</style>

<h2 id="top">Начало страницы</h2>
<a class="btn" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">
  Открыть справку о ссылках
</a>
<div class="demo-space">
  <p>Прокрутите страницу до ссылки «Наверх».</p>
</div>
<a class="btn" href="#top">Наверх</a>

Прокрутите страницу вниз и нажмите «Наверх». Браузер вернет вас к заголовку с id="top". Кнопка наверх для сайта работает без JavaScript, поскольку переход выполняет ссылка.

Свойство scroll-behavior: smooth добавляет плавную прокрутку. Медиазапрос отключает анимацию при пользовательском предпочтении уменьшенного движения. Без плавной прокрутки переход к якорю все равно работает.

Для кнопки «Назад» используйте <button> с обработчиком обращения к истории браузера.

<button type="button" id="go-back">Назад</button>

<script>
  document.getElementById('go-back').addEventListener('click', () => {
    window.history.back();
  });
</script>

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

Как отправить и сбросить форму

Кнопка submit запускает отправку данных связанной формы. Браузер сначала проверяет ограничения полей, например заполнение required. Обработчик на сервере принимает данные и выполняет дальнейшую работу.

<form method="get">
  <p>
    <label for="reader-name">Ваше имя</label>
    <input id="reader-name" name="reader" type="text"
           value="Анна" required>
  </p>
  <button type="submit">Отправить</button>
  <button type="reset">Вернуть исходное имя</button>
</form>

Измените имя и нажмите «Вернуть исходное имя». Поле снова покажет «Анна». Тип reset восстанавливает начальное значение. Если начальное значение пустое, сброс очистит поле.

Затем введите другое имя и нажмите «Отправить». Браузер откроет текущую страницу с параметром reader в адресе. Если стереть имя, встроенная проверка не пропустит отправку пустого поля.

Учебная форма показывает механизм отправки без серверного обработчика. В рабочем проекте укажите в action адрес своего обработчика. Для передачи чувствительных данных используйте HTTPS и подходящий метод отправки; не помещайте пароли в GET-параметры.

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

Кнопка с картинкой

Кнопка с картинкой создается через <button> с вложенным изображением или SVG. Текст внутри кнопки дает ей доступное имя. Декоративную картинку исключайте из озвучивания. Для <img> задайте alt="", для SVG – aria-hidden="true".

<button type="button">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
       viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" aria-hidden="true" focusable="false">
    <path d="M12 3v12m-5-5 5 5 5-5M5 17v4h14v-4"></path>
  </svg>
  Скачать файл
</button>

Браузер покажет стрелку рядом с надписью «Скачать файл». Пример демонстрирует содержимое кнопки; скачивание потребует отдельного действия. Для обычной ссылки на файл выбирайте <a href="…">.

Кнопке без видимой подписи задайте aria-label с названием действия.

<button type="button" aria-label="Открыть поиск">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
       viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" aria-hidden="true" focusable="false">
    <circle cx="10" cy="10" r="6"></circle>
    <path d="m15 15 6 6"></path>
  </svg>
</button>

Кнопка отобразит лупу, а скринридер озвучит «Открыть поиск». Само открытие поиска подключается обработчиком.

Элемент <input type="image"> отправляет форму. Атрибут alt задает его текстовую альтернативу. В примере изображение встроено в код, поэтому отдельный файл не нужен.

<form method="get">
  <label for="image-query">Поисковый запрос</label>
  <input id="image-query" name="q" type="search" required>
  <input type="image" name="search" alt="Найти" width="44" height="44"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Crect width='44' height='44' rx='8' fill='%23174ea6'/%3E%3Ccircle cx='19' cy='19' r='8' fill='none' stroke='white' stroke-width='3'/%3E%3Cpath d='M25 25L34 34' stroke='white' stroke-width='3'/%3E%3C/svg%3E">
</form>

Введите запрос и нажмите на лупу. Форма отправится на текущую страницу. Браузер добавит параметры search.x и search.y с координатами нажатия.

Для кнопки-картинки без отправки формы используйте <button type="button">.

Как оформить кнопку через CSS

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

<style>
  .btn {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #174ea6;
    color: #fff;
    font: inherit;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .btn:hover:not(:disabled) {
    background: #103b80;
  }

  .btn:active:not(:disabled) {
    background: #0b2d63;
    transform: translateY(1px);
  }

  .btn:focus-visible {
    outline: 3px solid #111;
    outline-offset: 3px;
  }

  .btn:disabled {
    background: #e5e7eb;
    color: #4b5563;
    cursor: not-allowed;
  }
</style>

<button class="btn" type="button">Настройки</button>
<a class="btn" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button">
  Документация
</a>
<button class="btn" type="button" disabled>Недоступно</button>

Страница покажет 3 элемента. Вы увидите кнопку, ссылку и отключенную кнопку. При наведении первые два потемнеют; при нажатии немного сместятся. Нажимайте Tab, чтобы увидеть рамку клавиатурного фокуса.

:hover задает оформление при наведении указателя.
:active показывает состояние во время активации элемента.
:focus-visible выделяет фокус, когда браузер считает его отображение нужным, в частности при клавиатурной навигации.
:disabled оформляет отключенную HTML-кнопку.

Атрибут disabled не отключает <a>. Если переход временно недоступен, уберите ссылку из интерфейса или замените ее поясняющим текстом. Один серый фон не блокирует переход.

Поведение свойств описано в MDN на страницах scroll-behavior и :focus-visible. Таблицы совместимости находятся на этих же страницах.

Как обработать нажатие на кнопку

Метод addEventListener('click', …) подключает обработчик нажатия через JavaScript. Он позволяет держать поведение отдельно от HTML-разметки. Для переключателя добавьте aria-expanded, чтобы сообщать состояние вспомогательным технологиям.

<button type="button" id="details-toggle"
        aria-expanded="false" aria-controls="details-panel">
  Показать подробности
</button>

<div id="details-panel" hidden>
  <p>Доставка доступна после подтверждения заказа.</p>
</div>

<script>
  const toggle = document.getElementById('details-toggle');
  const panel = document.getElementById('details-panel');

  toggle.addEventListener('click', () => {
    const expanded = toggle.getAttribute('aria-expanded') === 'true';
    panel.hidden = expanded;
    toggle.setAttribute('aria-expanded', String(!expanded));
    toggle.textContent = expanded
      ? 'Показать подробности'
      : 'Скрыть подробности';
  });
</script>

Скопируйте весь фрагмент, включая скрипт после блока. Первое нажатие покажет текст и изменит подпись кнопки. Второе нажатие скроет текст и восстановит исходную подпись. Клавиши Enter и Space тоже активируют кнопку без дополнительных обработчиков.

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

Доступность кнопок

Обычный <button> получает клавиатурный фокус и поддерживает Enter и Space. Элемент <div> без дополнительных настроек этого не делает. Правильный тег сразу дает браузеру сведения о назначении элемента.

Не удаляйте outline без равноценной замены. Пользователь клавиатуры должен видеть, какая кнопка сейчас выбрана. Требование описывает критерий WCAG 2.4.7 о видимом фокусе.

Критерий WCAG 2.5.8 задает минимум 24×24 CSS-пикселя для области нажатия с предусмотренными исключениями. Например, критерий допускает меньшие цели при достаточном расстоянии между ними. Для самостоятельных кнопок удобнее заложить область хотя бы 44×44 CSS-пикселя, как в примере CSS.

Контраст обычного текста кнопки должен достигать 4,5:1 относительно фона. Для крупного текста WCAG допускает 3:1. Белый текст на светлой заливке часто трудно прочитать, даже если кнопка большая. Подробности содержит критерий контраста текста.

Пройдите страницу клавишей Tab. Каждая доступная кнопка должна получать заметный фокус.
Активируйте кнопку клавишей Enter. Затем повторите действие клавишей Space.
Проверьте подписи кнопок без окружающего текста. Название «Сохранить настройки» объясняет действие точнее, чем «ОК».
Откройте страницу на телефоне. Убедитесь, что соседние элементы не мешают нажимать нужную кнопку.

Ошибки при верстке кнопок

Если кнопка ведет себя неожиданно, сначала проверьте тег и тип. Затем проверьте доступное имя, фокус и связь с формой. Оформление через CSS не исправляет ошибки HTML-семантики.

Ошибка	Что происходит	Как исправить
`<button>` без `type` в форме	Кнопка запускает отправку вместо локального действия	Для локального действия поставьте `type="button"`
`<div onclick="…">` вместо кнопки	Элемент не получает стандартное поведение кнопки с клавиатуры	Используйте `<button type="button">`
`<a>` без `href`	Элемент не работает как полноценная ссылка	Добавьте адрес перехода либо замените элемент кнопкой для действия
Иконка без доступного имени	Скринридер не сообщает понятное назначение кнопки	Добавьте видимый текст либо `aria-label`
`outline: none` без замены	Клавиатурный фокус становится незаметным	Верните рамку или задайте заметное оформление фокуса
`disabled` у ссылки	Ссылка продолжает выполнять переход	Замените недоступный переход текстом или уберите элемент
Ссылка внутри кнопки	Вложенные интерактивные элементы создают некорректную разметку	Оставьте один элемент – ссылку для перехода или кнопку для действия

Для перехода выбирайте <a href="…">, для действия – <button type="button">. Отправку формы поручайте submit, возврат исходных значений – reset. Если нужны текст и иконка, размещайте их внутри <button>.

Совет от нашей редакции: перед публикацией пройдите все кнопки одной клавиатурой. Такой проход обнаруживает незаметный фокус и недоступные действия еще до работы с дизайном.

АР Алина Рыбакавтор