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

Кнопка в HTML делается тегом <button>. Пишете открывающий и закрывающий тег, между ними текст кнопки и обязательно указываете тип: <button type="button">Нажми меня</button>. Без атрибута type кнопка внутри формы по умолчанию отправляет форму, и страница перезагрузится там, где вы этого не ждали.

Ниже разберём три типа кнопок, кнопку через <input>, кнопку-ссылку, оформление через CSS и действие по клику на JavaScript. Если вы только знакомитесь с разметкой, начните с материала о том, что такое язык HTML, и со списка основных тегов.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как сделать кнопку в HTML за три шага

Понадобится любой текстовый редактор и браузер. Блокнот, VS Code или Sublime Text подойдут одинаково.

1. Создайте файл страницы. Подойдёт index.html с базовым каркасом, как его собрать, рассказали в инструкции о создании HTML-файла.
2. Вставьте тег кнопки внутрь <body> и задайте тип и надпись.
3. Откройте файл в браузере и нажмите кнопку. Пока у неё нет действия, ничего не произойдёт, и это нормально.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя первая кнопка</title>
</head>
<body>
  <button type="button">Нажми меня</button>
</body>
</html>

Браузер нарисует серую кнопку со стандартной рамкой. Внешний вид поменяем позже через CSS, сначала разберёмся с поведением.

Три типа кнопок: submit, reset и button

Атрибут type решает, что кнопка делает сама по себе, без скриптов. По справке MDN о теге button значений три.

Посмотрим все три в одной форме:

<form action="/search/">
  <input type="text" name="q" value="кнопки">
  <button type="submit">Найти</button>
  <button type="reset">Очистить</button>
  <button type="button">Ничего не делать</button>
</form>

Есть нюанс с reset, на котором путаются новички. Кнопка возвращает поле к значению из атрибута value. Если ввести «html кнопка» и нажать «Очистить», в поле снова появится слово «кнопки».

Кнопка снаружи формы

Иногда кнопку отправки нужно поставить в другом месте страницы, например в шапке. Для этого у формы задают id, а у кнопки атрибут form с тем же значением:

<form id="order" action="/order/">
  <input type="text" name="phone">
</form>

<button type="submit" form="order">Оформить заказ</button>

Кнопка стоит за пределами <form>, но отправляет именно форму order. Так удобно делать длинные анкеты, где кнопка «Оформить» закреплена внизу экрана.

Кнопка через тег input

Второй способ старше: <input type="button">. Надпись на такой кнопке задаётся атрибутом value, закрывающего тега нет.

<input type="button" value="Нажми меня">
<input type="submit" value="Отправить">
<input type="reset" value="Сбросить">

Код рабочий, но в справке MDN о кнопке на теге input прямо сказано, что элемент <button> теперь предпочтительнее. Разница видна, как только кнопке понадобится что-то кроме текста.

Вывод простой: в новом коде пишите <button>, а <input> оставьте для чтения чужих старых страниц.

Кнопка-ссылка: когда нужен тег a

Частый вопрос: как сделать кнопку, которая ведёт на другую страницу. Ответ: никак, для перехода есть ссылка. Кнопка выполняет действие на текущей странице, ссылка открывает другой адрес.

Если по дизайну переход должен выглядеть как кнопка, берите тег <a> и оформляйте его классом:

<a class="btn" href="https://example.com/">Перейти в каталог</a>

Как устроены адрес, новая вкладка и атрибут rel, подробно разобрали в статье о ссылках в HTML.

Не вкладывайте <button> внутрь <a> и наоборот. По справке MDN о теге a внутри ссылки не может быть интерактивного содержимого, а кнопка к нему относится. Браузер такую разметку как-то покажет, но валидатор W3C выдаст ошибку: кнопка не может быть потомком ссылки.

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

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

Стандартная серая кнопка годится для черновика. Для сайта ей задают класс и описывают вид в стилях. Как подключить файл стилей к странице, мы рассказывали в инструкции о подключении CSS к HTML.

<button type="button" class="btn">Записаться</button>

<style>
  .btn {
    padding: 12px 24px;
    font: 600 16px/1.2 system-ui, sans-serif;
    color: #fff;
    background: #2f6fed;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }
  .btn:hover {
    background: #1f57c7;
  }
  .btn:focus-visible {
    outline: 3px solid #f5b400;
    outline-offset: 2px;
  }
  .btn:disabled {
    background: #a9b4c8;
    cursor: not-allowed;
  }
</style>

Что здесь происходит:

• padding задаёт внутренние отступы, от них зависит размер кнопки сильнее, чем от width;
• border: none убирает стандартную рамку браузера;
• :hover меняет цвет под курсором мыши;
• :focus-visible рисует рамку, когда до кнопки дошли клавишей Tab;
• :disabled красит неактивную кнопку в серый.

Рамку фокуса не удаляйте через outline: none без замены. В англоязычной справке MDN советуют не переопределять стандартное кольцо фокуса, а если всё же переопределяете, делать его контрастным. Без рамки человек, который ходит по странице с клавиатуры, не видит, где находится. Тот же класс .btn подходит и для ссылки из прошлого раздела.

Как повесить действие на кнопку

Кнопка с type="button" что-то делает только со скриптом. Самый короткий вариант: атрибут onclick прямо в теге.

<button type="button" onclick="alert('Привет!')">Поздороваться</button>

Для одной строки сойдёт. Когда логики больше, код выносят в скрипт и подписываются на событие через addEventListener. Так HTML остаётся чистым, а на одну кнопку можно повесить несколько обработчиков.

<button type="button" id="counter">Нажато: 0</button>

<script>
  const btn = document.getElementById('counter');
  let clicks = 0;
  btn.addEventListener('click', () => {
    clicks += 1;
    btn.textContent = 'Нажато: ' + clicks;
  });
</script>

После трёх нажатий на кнопке написано «Нажато: 3». Как скрипт находит элемент по id и меняет его текст, объясняет статья про DOM-дерево в JavaScript.

Неактивная кнопка: атрибут disabled

Атрибут disabled запрещает нажимать кнопку. Его ставят, например, пока человек не согласился с условиями:

<label><input type="checkbox" id="agree"> Согласен с условиями</label>
<button type="submit" id="send" disabled>Отправить</button>

<script>
  document.getElementById('agree').addEventListener('change', (e) => {
    document.getElementById('send').disabled = !e.target.checked;
  });
</script>

Пока галочка не стоит, кнопка серая и не реагирует. Поставили галочку, и она включилась.

CheckroiПодборка курсов по Javascript209 курсов • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Частые ошибки и как их исправить

Пять ошибок, из-за которых кнопка ведёт себя не так, как задумано. Каждую можно найти и исправить за минуту.

1. Страница перезагружается при клике. Кнопка стоит в форме без атрибута type и работает как submit. Решение: допишите type="button" всем кнопкам, которые не отправляют форму.
2. Кнопка сделана из div. Такой блок не получает фокус по Tab и не нажимается с клавиатуры. Даже с tabindex="0" блок <div onclick> не реагирует ни на Enter, ни на пробел, а у <button> обе клавиши запускают тот же onclick. В справке MDN о роли button так и сказано: у другого тега onclick срабатывает только от мыши, фокус и клавиши придётся программировать самому. Решение: берите <button>.
3. Кнопка из одной иконки. Экранная читалка не поймёт, что она делает. Решение: оставьте внутри кнопки короткий текст, например «Закрыть». Если по дизайну текста не видно, скройте его визуально, но не удаляйте из разметки.
4. Кнопка вместо ссылки. У кнопки нет адреса, поэтому её не откроешь в новой вкладке. А по справке Google о ссылках роботы обычно сканируют только ссылки в теге <a> с атрибутом href. Решение: для переходов тег <a>.
5. Стили не применились. Чаще всего в CSS опечатка в имени класса или файл стилей не подключён. Как селектор находит элемент, объясняет материал о том, что такое CSS. Решение: откройте инструменты разработчика (F12), выделите кнопку и посмотрите, какие правила к ней пришли.

Где освоить HTML и CSS системно

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

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

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML