Кнопки в HTML и CSS: короткий гайд для верстки

К концу этого гайда у вас будут три рабочие кнопки: базовая с наведением и нажатием, кнопка-ссылка (когда клик должен вести на другую страницу) и неактивная кнопка в состоянии disabled. Всё на чистом HTML и CSS, без фреймворков. Времени уйдёт минут двадцать-тридцать, если копировать код по частям и смотреть результат в браузере.

Проверено на актуальных версиях Chrome, Firefox и Safari (2024 год). CSS здесь стандартный, ничего экспериментального — работает и в старых браузерах.

Что нужно до начала

Ничего устанавливать не придётся. Хватит:

• любого текстового редактора — VS Code, Sublime, даже «Блокнот»;
• браузера, чтобы открывать файл и смотреть результат;
• одного файла index.html, который вы создадите на первом шаге.

Стили я буду писать прямо внутри HTML в теге <style> — так проще для обучения, всё в одном файле. В реальном проекте CSS обычно выносят в отдельный .css-файл, но принцип тот же.

Шаг 1. Создайте страницу с кнопкой

Создайте файл index.html и вставьте в него разметку целиком:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Кнопки</title>
  <style>
    /* стили добавим на следующем шаге */
  </style>
</head>
<body>
  <button type="button" class="btn">Отправить</button>
</body>
</html>

Откройте файл двойным кликом. В браузере должна появиться серая системная кнопка с текстом «Отправить». Пока некрасивая — это нормально, стили дальше.

Одно предложение «почему так»: тег <button> с type="button" — это именно кнопка для действий на странице, а не для отправки формы. Атрибут type важен: без него кнопка внутри <form> ведёт себя как type="submit" и перезагружает страницу.

Шаг 2. Оформите базовую кнопку

Замените комментарий в <style> на эти правила:

.btn {
  /* внутренние отступы: сверху-снизу 10px, слева-справа 20px */
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
  background-color: #2563eb;
  border: none;              /* убираем системную рамку */
  border-radius: 6px;        /* скругление углов */
  cursor: pointer;           /* курсор-рука при наведении */
}

/* наведение мышью */
.btn:hover {
  background-color: #1d4ed8;
}

/* момент нажатия */
.btn:active {
  background-color: #1e40af;
}

Обновите страницу. Кнопка станет синей со скруглёнными углами. При наведении цвет темнеет, при нажатии — темнеет ещё сильнее. Курсор превращается в руку.

Не забудьте про фокус с клавиатуры

Если человек ходит по странице клавишей Tab, кнопка должна показывать, что она выбрана. Браузер рисует такую обводку сам, но многие её случайно убирают через outline: none. Не делайте так без замены. Если хотите свой стиль обводки, добавьте:

.btn:focus-visible {
  outline: 2px solid #1e40af;
  outline-offset: 2px;
}

Псевдокласс :focus-visible показывает обводку только при навигации с клавиатуры и не мешает тем, кто кликает мышью. Это лучше, чем полностью убирать outline — иначе человек с клавиатуры не поймёт, где находится.

Шаг 3. Кнопка-ссылка

Иногда «кнопка» должна вести на другую страницу — например, «Перейти в каталог». Тогда это не <button>, а ссылка <a>, которую вы стилизуете как кнопку. Добавьте в <body>:

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

И правило в <style>:

.btn-link {
  display: inline-block;       /* ссылка по умолчанию строчная, делаем блочной */
  text-decoration: none;       /* убираем подчёркивание */
}

Ссылка теперь выглядит как синяя кнопка, но при клике переходит по адресу из href. Это правильно: то, что ведёт на URL, — ссылка; то, что запускает действие на этой же странице (открыть меню, отправить форму), — <button>. Не путайте — от этого зависит и доступность, и то, сможет ли пользователь открыть ссылку в новой вкладке.

Шаг 4. Неактивная кнопка

Кнопку, на которую пока нельзя нажать, помечают атрибутом disabled. Добавьте ещё одну:

<button type="button" class="btn" disabled>Ждём…</button>

И стиль для этого состояния:

.btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;    /* курсор с перечёркиванием */
}

Такая кнопка станет серой, курсор при наведении покажет запрет, а клики и нажатия клавиш браузер заблокирует сам — обрабатывать это в коде не нужно. Атрибут disabled работает только на <button>, <input> и других элементах формы. На ссылке <a> он не действует — для неё пришлось бы убирать href и менять роль, что усложняет доступность.

Собранный результат

После всех шагов на странице три кнопки: синяя рабочая, синяя ссылка и серая неактивная. Полный <body>:

<body>
  <button type="button" class="btn">Отправить</button>
  <a href="/catalog" class="btn btn-link">Перейти в каталог</a>
  <button type="button" class="btn" disabled>Ждём…</button>
</body>

Если не получилось

• Кнопка перезагружает страницу при клике. Она внутри <form> и без type="button" считается кнопкой отправки. Добавьте type="button".
• Стили не применяются, кнопка осталась серой системной. Проверьте, что класс в разметке (class="btn") точно совпадает с селектором в CSS (.btn) — с точкой перед именем и без опечаток.
• Ссылка-кнопка встала в столбик или отступы не работают. Забыли display: inline-block. У строчных элементов <a> вертикальные отступы padding ведут себя не так, как ожидаешь.
• Русский текст в кнопке отображается кракозябрами. Нет строки <meta charset="UTF-8"> в <head> или файл сохранён не в UTF-8.
• При нажатии Tab не видно, какая кнопка выбрана. Где-то в стилях стоит outline: none. Уберите или замените на :focus-visible, как в шаге 2.

Что делать дальше

Базовые кнопки готовы. Дальше по мере надобности:

• вынесите CSS в отдельный файл и подключите через <link> — так стили переиспользуются на всех страницах;
• сделайте варианты кнопок через дополнительные классы (.btn-secondary, .btn-danger) — цвет меняете, базовые правила .btn оставляете общими;
• если кнопка должна что-то делать по клику (открыть окно, отправить данные) — это уже JavaScript и обработчик события, отдельная тема;
• посмотрите, как кнопка выглядит на телефоне: для удобного нажатия пальцем область клика делают не меньше 44×44 пикселей.