Создание интерактивной кнопки с нуля

Иван Корнев·17.05.2026·⏱3 мин

Чтобы сделать работающую кнопку на веб-странице, нужно объединить три технологии: HTML для структуры (тег <button>), CSS для внешнего вида (цвета, отступы, эффекты) и JavaScript для реакции на клик (событие click). Базовый пример: <button class="btn">Нажми меня</button>, где стиль задается через класс .btn, а логика — через addEventListener.

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

1. HTML: Структура и семантика

Основа любой кнопки — правильный HTML-элемент. Хотя визуально кнопку можно имитировать через <div> или <a>, стандартом является тег <button>. Он обеспечивает доступность (accessibility), поддержку навигации с клавиатуры и правильную семантику для поисковых систем.

Базовый синтаксис

<button type="button" class="my-button">
  Текст кнопки
</button>

Важные атрибуты:

type="button": По умолчанию внутри формы кнопка имеет тип submit, что может перезагрузить страницу. Если кнопка не отправляет форму, всегда явно указывайте type="button".
disabled: Делает кнопку неактивной (серой и некликабельной).
aria-label: Используется, если на кнопке только иконка без текста, чтобы скринридеры могли озвучить её назначение.

Почему не <div>? Использование <div role="button"> требует дополнительной настройки JavaScript для обработки нажатия клавиши Enter или пробела. Тег <button> делает это автоматически из коробки.

2. CSS: Стилизация и визуальные эффекты

«Голая» HTML-кнопка выглядит скучно. CSS позволяет превратить её в привлекательный элемент интерфейса. Рассмотрим ключевые свойства для создания современной кнопки.

Основные свойства стиля

.my-button {
  /* Цвета и фон */
  background-color: #007bff;
  color: white;
  
  /* Размеры и отступы */
  padding: 12px 24px;
  font-size: 16px;
  
  /* Границы и скругление */
  border: none;
  border-radius: 8px;
  
  /* Курсор и переходы */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

Состояния кнопки (Hover, Active, Focus)

Интерактивность достигается изменением стиля при взаимодействии пользователя.

:hover — наведение курсора.
:active — момент нажатия (кнопка «вдавливается»).
:focus — фокус клавиатуры (важно для доступности).

/* Наведение */
.my-button:hover {
  background-color: #0056b3;
}

/* Нажатие */
.my-button:active {
  transform: scale(0.98); /* Легкое уменьшение для эффекта нажатия */
}

/* Фокус (доступность) */
.my-button:focus-visible {
  outline: 2px solid #ffcc00;
  outline-offset: 2px;
}

Эффект нажатия Свойство transform: scale(0.98) в состоянии :active создает приятное тактильное ощущение клика без использования сложных анимаций.

3. JavaScript: Обработка клика

Сама по себе кнопка ничего не делает. Чтобы добавить логику (открытие меню, отправка данных, переключение темы), нужно подключить обработчик событий в JavaScript.

Современный подход: addEventListener

Избегайте устаревшего атрибута onclick в HTML. Лучше разделять структуру и поведение.

// 1. Находим кнопку в DOM
const button = document.querySelector('.my-button');

// 2. Добавляем слушатель события 'click'
button.addEventListener('click', function(event) {
  // Код, который выполнится при клике
  console.log('Кнопка была нажата!');
  
  // Пример изменения текста
  this.textContent = 'Загрузка...';
  this.disabled = true; // Блокируем кнопку, чтобы избежать повторных кликов
});

Передача данных

Если вам нужно передать дополнительные данные, используйте data- атрибуты в HTML:

<button class="buy-btn" data-product-id="123" data-price="990">Купить</button>

document.querySelector('.buy-btn').addEventListener('click', (e) => {
  const id = e.target.dataset.productId; // Получаем "123"
  const price = e.target.dataset.price;  // Получаем "990"
  
  alert(`Товар ${id} добавлен в корзину. Цена: ${price}`);
});

Частые ошибки новичков

Ошибка	Почему это плохо	Как исправить
Использование `<div>` вместо `<button>`	Проблемы с доступностью и SEO	Всегда используйте `<button>` для действий
Отсутствие `type="button"`	Случайная отправка формы и перезагрузка страницы	Явно указывайте тип кнопки
Удаление `outline` в CSS без замены	Пользователи клавиатуры не видят фокус	Используйте `outline: none` только вместе с кастомным `box-shadow` или границей при `:focus`
Обработчик внутри HTML (`onclick="..."`)	Смешивание слоев, сложно поддерживать	Используйте `addEventListener` в JS-файлах

FAQ

Как сделать кнопку-ссылку? Если кнопка должна вести на другую страницу, лучше использовать тег <a>, стилизованный под кнопку. Если же действие происходит на текущей странице (например, открытие модального окна), используйте <button>.

Как отключить кнопку после клика? В JavaScript установите свойство disabled в true: button.disabled = true;. В CSS можно дополнительно изменить прозрачность: .my-button:disabled { opacity: 0.6; cursor: not-allowed; }.

Почему кнопка не меняет цвет при наведении? Проверьте специфичность CSS-селекторов. Возможно, другой стиль перебивает ваш :hover. Также убедитесь, что у элемента есть background-color, который вы пытаетесь изменить.