ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

HTML Кнопки

❮ Prev Next ❯

Кнопки позволяют пользователям взаимодействовать с веб-страницей. Они могут отправлять формы, запускать JavaScript или запускать различные действия при нажатии.

HTML Кнопка

Как сделать кнопку в HTML? Очень просто! HTML-элемент <button> определяет кнопку, на которую можно нажимать.

Сама по себе кнопка ничего не делает, пока вы не прибавите к ней действие.

Пример

<button>Тицни мене</button>
Попробуйте сами »

Стилизация HTML кнопок

Кнопки часто стилизуются с помощью CSS:

Пример

<button class="mytestbtn">Зелёная кнопка</button>
Попробуйте сами »

Выключенные кнопки

Используйте атрибут disabled, чтобы сделать кнопку некликабельной:

Пример

<button disabled>Некликабельная кнопка</button>
Попробуйте сами »

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

Кнопка с JavaScript

Вы можете запускать JavaScript, когда пользователь нажимает кнопку, используя атрибут onclick:

Пример

<button onclick="alert('Hello!')">Click Me</button>
Попробуйте сами »

Примечание: Вы узнаете больше о JavaScript в разделе HTML JavaScript на нашем сайте W3Schools на русском.

Типы кнопок

Атрибут type определяет, что делает кнопка после нажатия. Существует три типа кнопок:

  • type="button" - Обычная кнопка, на которую можно нажать (по умолчанию ничего не делает)
  • type="submit" - Отправляет форму
  • type="reset" - Сбрасывает все поля формы
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

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

Просто знайте, что кнопка submit отправляет данные формы на сервер, тогда как кнопка reset очищает форму:

Пример

<form action="/action_page.html">
  First name: <input type="text" name="fname">
  <button type="submit">Submit</button>
 <button type="reset">Reset Form</button>
</form>
Попробуйте сами »

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

Кнопка или ссылка?

Когда использовать <a> (ссылку)?

Тег <a> создает гиперссылку. Он используется при переходе на другую страницу или на другой раздел страницы.

Правило: Если действие - это переход, используйте тег <a>.

Пример

<a href="https://example.com">Перейти на другой сайт</a>

Или для перехода на какой-нибудь раздел страницы:

Пример

<a href="#contact">Контакты</a>

Когда использовать <button> (кнопку)?

Тег <button> создает элемент, выполняющий действие на той же странице — например, отправка формы, открытие всплывающего окна (модалки), запуск JavaScript.

Правило: Если действие – это запуск события на странице, используйте <button>.

Пример - отправка формы:

<form>
  <input type="text" placeholder="Ваше имя">
  <button type="submit">Отправить</button>
</form>

или

Пример - кнопка для JavaScript (открытие модалки):

<button onclick="openModal()">Открыть модалку</button>
<script>
  function openModal() {
    alert("Модалка открыта");
  }
</script>

Сравнительная таблица ссылки и кнопки

Характеристика Ссылка <a> Кнопка <button>
Цель Навигация (куда?) Действие (что сделать?)
Клавиатура Активируется клавишей Enter Активируется Enter или Space (пробел)
Состояние браузера Изменяет историю/URL Не изменяет историю (обычно)
Контекстное меню Имеет пункт «Открыть в новой вкладке» Не имеет навигационных пунктов

Подсказка для начинающих: Если вы пишете href="javascript:void(0)" или href="#", чтобы ссылка никуда не вела — вы ошибаетесь. Вам нужен тег <button>.

Кнопка с иконкой в HTML

Внутри тега <button> можно размещать любой HTML-контент: текст, изображения (<img>), SVG-иконки или их комбинацию. Это стандартная и правильная практика.

Иконка через <img>

Самый простой вариант – вставить изображение внутрь кнопки.

Пример

<button>
  <img src="icon-save.png" alt="" width="16" height="16">
  Сохранить
</button>

Объяснение:

  • <img> вставляется так же, как обычный текст.
  • обязательный атрибут alt="" оставляют пустым, если рядом есть текст (иначе скринридеры будут читать лишнее).
  • размер иконки обычно задают через width / height или CSS.

Кнопка лишь с иконкой

Если кнопка без текста, необходимо добавить пояснение для доступности - aria-label="".

Пример

<button aria-label="Поиск">
  <img src="icon-search.png" alt="">
</button>

Иконка через SVG (рекомендуется)

Иконка через SVG – самый лучший вариант: четкий на любом экране, легко стилизуется через CSS.

Пример

<button>
  <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2"/>
  </svg>
  Добавить
</button>

Преимущества SVG:

  • Не размывается;
  • Наследует цвет текста (currentColor);
  • Не требует отдельного файла.

Типичная ошибка:

❌ Неправильно:

<a href="#">
  <button>OK</button>
</a>

✔ Правильно:

<button>
  <img src="icon-ok.png" alt="">
  OK
</button>

Коротко:

  • <button> может содержать иконки, текст и SVG
  • <img> — просто и понятно
  • SVG — современно и правильно
  • Кнопка без текста → aria-label обязательно!

Доступность (Accessibility / A11y) для кнопок

Что такое доступность (accessibility) и для чего это необходимо?

Доступность — это практика создания веб-интерфейсов, которые могут использовать все люди, включая тех, кто имеет ограничение зрения, слуха, моторики или когнитивные трудности. Если кнопки не доступны, пользователи с экранными ридерами, клавиатурной навигацией или другими ассистивными технологиями не смогут эффективно взаимодействовать с интерфейсом.

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

Как писать кнопки, дружественные ассистивным технологиям?

Принцип: кнопка всегда должна быть элементом <button> (или элемент с ролью кнопки, если это сложный UI), и её текст должен быть кратким, но чётким о действии.

Плохо:

<button></button> <!-- не имеет текста — ничего не описывает -->
<button><img src="icon.png"></button> <!-- лишь иконка без описания -->

Хорошо:

<button>Отправить форму</button>
<button>Закрыть диалог</button>

Почему доступность – это важно для кнопок?

Люди с нарушениями зрения используют скринридеры (приложения, озвучивающие текст на экране). Если вы вместо кнопки используете просто картинку или <div>, скринридер не сообщит пользователю, что на этот элемент можно нажать.

Ключевые правила доступности для кнопок:

  • Понятный текст (Accessible Name):
    Кнопка должна иметь текст, объясняющий действие.
    • Плохо: <button>Нажми сюда</button> (Непонятно, что произойдёт).
    • Хорошо: <button>Скачать отчёт в PDF</button>
  • Кнопки-иконки и aria-label:
    Если ваша кнопка содержит только иконку (например, «крестик» для закрытия), скринридер прочтет её как «кнопка, пустой текст». Используйте атрибут aria-label, чтобы дать имя.

    Пример HTML:

    <button aria-label="Закрыть окно">
      <img src="close-icon.svg" alt="">
    </button>
  • Визуальный фокус (Focus Indicator):
    Многие начинающие удаляют «синюю рамку» (outline), которая появляется вокруг кнопки при нажатии или переходе клавишей Tab. Никогда не делайте это без замены другим стилем! Люди, не пользующиеся мышкой, должны видеть, где они находятся.

    Пример CSS:

    /* Плохо: пользователь клавиатуры "потеряется" */
      button:focus {
      outline: none;
    }

    /* Хорошо: мы прибрали стандартный стиль, но сделали свой заметный */
      button:focus {
      outline: none;
      box-shadow: 0 0 0 4px orange;
    }
  • Работа с клавиатурой:
    Тег <button> автоматически поддерживает нажатие клавишами Enter и Space. Если вы сделаете кнопку с <div>, вам придется собственноручно писать JavaScript код, чтобы она реагировала на клавиатуру. Поэтому всегда используйте родной тег.

Когда у кнопки есть только иконка — добавляйте текстовое описание или ARIA-метку.

Использование ARIA (например, aria-label), когда текст кнопки не описательный

ARIA — это набор атрибутов для добавления семантики элементам, когда этого невозможно добиться из-за обычной разметки.

В случае кнопки без видимого текста (например, только иконка) всегда добавляйте aria-label или aria-labelledby, чтобы экранные ридеры могли прочитать назначение:

Пример — кнопка с иконкой "Закрыть":

Пример

<button aria-label="Закрыть">
  <svg width="16" height="16" aria-hidden="true">
    <!-- графіка X -->
  </svg>
</button>

Если у кнопки есть видимый текст — сделайте его описательным, и ARIA не требуется:

Пример

<button>Добавить в корзину</button>

Еще вариант – когда кнопка является частью более сложного элемента:

Пример

<button aria-labelledby="btnText btnHint">
  <span id="btnText">Фильтровать</span>
  <span id="btnHint" class="visually-hidden">по цене</span>
</button>

Здесь visually-hidden — это класс, скрывающий визуально текст, но оставляющий его доступным для ридеров.

Фокусное поведение (Keyboard focus)

Пользователи, не использующие мышь, перемещаются на странице клавиатурой (Tab, Shift+Tab, Enter, Space). Кнопки должны быть фокусированы с помощью Tab и иметь четкий визуальный индикатор фокуса.

Правило:

  • Элемент <button> автоматически фокусируется клавиатурой.
  • Запрещайте прописывать outline: none; без замены другим четким стилем фокуса.
  • Фокус должен быть видимым.

Пример CSS для четкого фокуса:

button:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Пример HTML:

<button>Поиск</button>

Даже если кнопка выглядит как текст или иконка, она должна быть доступна через Tab и иметь фокусную рамку.

Итог: чек-лист для доступных кнопок

  1. ИСпользуйте <button> вместо <div> или <span> с JavaScript.
  2. Обеспечьте видимый текст кнопки, четко описывающий действие.
  3. Если текст не виден — добавьте aria-label или aria-labelledby.
  4. Обеспечьте поддержку клавиатурной навигации и четкий стиль фокусировки.
  5. Не убирайте стандартные признаки фокусировки без альтернативы.

Сочетание HTML+CSS для правильной кнопки

Вот пример правильной, доступной кнопки, которая выглядит современно и понятна всем:

Пример HTML + CSS:

<button type="button" class="btn-primary" aria-label="Отправить сообщение">
  <span>Отправить</span>
  <svg>...</svg>
</button>

<style>
  .btn-primary {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

  /* Обеспечиваем доступность при фокусе */
  .btn-primary:focus {
  outline: 3px solid #ffcc00;
  outline-offset: 2px;
}

  /* Стиль для состояния, когда кнопка нажата */
  .btn-primary:active {
    transform: translateY(1px);
}
</style>
Попробуйте сами »

Стилизация состояний кнопок (CSS Pseudo-classes)

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

4 главные состояния кнопки:

  • :hover (наведение) — активируется, когда пользователь наводит курсор мыши на кнопку.
  • :focus (фокус) — активируется, когда пользователь выбирает кнопку с помощью клавиатуры (клавиша Tab). Чрезвычайно важно для доступности.
  • :active (нажатие) – момент непосредственного клика мышкой по кнопке.
  • :disabled (выключено) — вид кнопки, когда она неактивна (имеет атрибут disabled).

Пример профессиональной стилизации

Ниже представлен код современной кнопки с плавными переходами и чёткими состояниями.

Пример HTML:

<div class="button-demo-container">
  <button class="btn-modern">Активная кнопка</button>
  <button class="btn-modern" disabled>Выключенная кнопка</button>
</div>

Пример CSS:

/* Базовые стили кнопки */
.btn-modern {
  background-color: #04AA6D; /* Фирмовый зелёный */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease; /* Плавный переход для всех свойств */
  outline: none;
}

/* Состояние: Наведение мыши */
.btn-modern:hover {
  background-color: #059862;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px); /* Кнопка вроде поднимается */
}

/* Стан: Фокус (для клавиатуры) */
.btn-modern:focus {
  box-shadow: 0 0 0 4px rgba(4, 170, 109, 0.4);
  background-color: #059862;
}

/* Состояние: Нажатие */
.btn-modern:active {
  transform: translateY(0); /* Возвращается на место */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Состояние: Выключено */
.btn-modern:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed; /* Курсор показывает запрет */
  transform: none;
  box-shadow: none;
}
Попробуйте сами »

Результат:

Подробнее о стилизации кнопок на веб-странице вы можете узнать из урока CSS-кнопки на нашем сайте W3Schools на русском.

HTML Справочник кнопок

Тег Описание
<button> Определяет кнопку, на которую можно нажать

Подсказка: Чтобы посмотреть полный список всех тегов HTML, посетите Справочник HTML-тегов.

Атрибуты кнопки

Атрибут Значение Описание
type button
submit
reset 		Определяет тип кнопки. По умолчанию — submit
name текст Имя кнопки, которое отправляется вместе с формой
value текст Значение кнопки, которое отправляется на сервер
disabled disabled Выключает кнопку — она становится неактивной
autofocus autofocus Автоматически устанавливает фокус на кнопку при загрузке
form ID формы Привязывает кнопку к форме, даже если она находится вне <form>
formaction URL URL для отправки данных (переопределяет action формы)
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain 		Тип кодирования данных формы
formmethod get
post 		Метод отправки формы
formnovalidate formnovalidate Выключает валидацию при отправке
formtarget _self
_blank
_parent
_top 		Где открывать результат отправки
popovertarget ID элемента Привязывает кнопку до popover-элемента
popovertargetaction toggle
show
hide 		Действие для popover-элемента

❓ FAQ (Вопросы и ответы по уроку)

Для чего необходимы кнопки на веб-странице?

Кнопки позволяют пользователям взаимодействовать с веб-страницей. Они могут отправлять формы, запускать JavaScript или запускать различные действия при нажатии.

Как сделать кнопку в HTML?

Для создания кнопки в HTML используется элемент <button>, который определяет кнопку, на которую можно нажимать.

Какой элемент HTML на веб-странице определяет кнопку, на которую можно нажать?

HTML-элемент <button> определяет кнопку, на которую можно нажать. Сама по себе кнопка ничего не делает, пока вы не добавите к ней действие.

Что вы используете для оформления кнопок на веб-странице?

Кнопки на веб-странице чаще всего оформляются с помощью CSS.

Какой атрибут используется, чтобы сделать кнопку на веб-странице неактивной?

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

Какой атрибут используется для запуска JavaScript, когда пользователь нажимает кнопку?

Чтобы запустить JavaScript, когда пользователь нажимает кнопку, используется атрибут onclick.

Какие типы кнопок существуют на веб-странице?

Есть три типа кнопок:

  • type="button" - Обычная кликабельная кнопка (по умолчанию ничего не делает)
  • type="submit" - Отправляет форму
  • type="reset" - Сбрасывает все поля формы
Для чего чаще всего используются кнопки на веб-странице?

Чаще всего кнопки на веб-странице используются внутри форм:

  • Кнопка отправки отправляет данные формы на сервер;
  • Кнопка сброса очищает форму.
В чем основное отличие кнопки от ссылки?

Ссылка (<a>) используется для навигации и изменения URL-адресов, а кнопка (<button>) предназначена для выполнения функциональных действий на текущей странице.

Почему вам следует использовать <button> вместо <input>?

Элемент <button> позволяет размещать HTML-контент внутри себя, например значки или сложное форматирование, что невозможно с помощью тега <input>.

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

Используйте атрибут Disabled, чтобы сделать кнопку неактивной. В большинстве браузеров он автоматически изменится на блеклый.

Какой сайт на русском языке лучше всего подходит для изучения HTML онлайн?

Лучший сайт для изучения HTML на русском языке — это сайт W3Schools на русском.

📚 Дополнительные ресурсы для углубленного изучения

Тем, кто хочет знать о теге <button> абсолютно все, рекомендуем обратиться к первоисточникам и официальной документации:

✅ Чек-лист: Что вы должны знать после этого урока:

Связанные темы

Тег <button> Тег <a> Тег <form> CSS Кнопки HTML Ссылки CSS Формы
❮ Prev Next ❯