Кнопки на сайте: иерархия, подписи, размер и место

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

Интерфейс-элементы Обновлено 04.10.2026

Коротко

Кнопка — обещание действия, и хорошая кнопка его выполняет: сразу видно, какая кнопка на экране главная, что случится после нажатия и где её искать. На экране одно главное действие — оно самое заметное; остальные тише, от контурной кнопки до простой текстовой ссылки. Подпись называет результат: «Записаться на замер», а не «Отправить». Кнопка делает что-то на странице, ссылка ведёт на другую — внешне они могут быть одинаковыми, но элемент должен быть правильным. Область нажатия — не меньше 44 px, на телефоне главное действие стоит внизу, под большим пальцем, а опасное действие называет себя, вместо того чтобы спрашивать «Вы уверены?».

Одна главная кнопка на экран

Четыре действия карточки товара. Переключите вид: когда кричат все кнопки, не слышно ни одной.

Мебель из массива

Стол из дуба 160 × 90

24 000 ₽

Купить В избранное Сравнить Задать вопрос

Когда все четыре одинаковые, глазу приходится читать каждую подпись, чтобы найти «Купить». Когда кнопки разложены по важности, главное действие находится ещё до чтения: оно самое крупное и контрастное, второе — контур, остальные — текст.

Пять видов кнопок и где они нужны

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

Вид	Для чего	Сколько на экране
Главная	ключевое действие: купить, записаться, отправить	одна
Второстепенная	альтернатива рядом с главной: в избранное, позвонить	одна-две
Контурная	третьестепенные действия: сравнить, поделиться	по необходимости
Текстовая	действия внутри текста, карточек и таблиц	по необходимости
Опасная	удалить, отменить подписку, сбросить	только рядом с самим действием

Подпись говорит, что произойдёт

Глагол и результат. Каждая хорошая подпись добавляет то, что безликая прячет.

Отправить Записаться на замер + что получит человек

ОК Удалить 3 файла + действие и его объём

Нажмите здесь Скачать прайс · PDF, 2 МБ + что это и сколько весит

Далее Перейти к оплате + куда ведёт шаг

Подробнее Смотреть все 48 кухонь + что ждёт за ссылкой

Полезная проверка: прочитайте одну кнопку, без страницы вокруг. Если понятно, что случится после нажатия, — подпись работает. «Отправить» эту проверку не проходит, «Записаться на замер» — проходит.

Кнопка делает, ссылка ведёт

Внешне они могут быть одинаковыми — разница в элементе, и люди её чувствуют.

Ссылку, сделанную кнопкой, не открыть в новой вкладке, и поисковик по ней не пройдёт. Кнопка, сделанная ссылкой, сбивает с толку экранную читалку и не реагирует на пробел. Элемент выбирают по тому, что происходит, а внешний вид — по важности.

Ссылка · `<a href>`

открывает другую страницу или раздел
открывается в новой вкладке
её можно скопировать и отправить
по ней проходит поисковик

Кнопка · `<button>`

отправляет форму
добавляет в корзину
открывает окно или меню
переключает фильтр, тему, звук

Размер и область нажатия

Покажите область нажатия: маленькая кнопка может выглядеть высотой 32 px, но пальцу нужно 44.

В корзину

S · 32 px

плотные таблицы и фильтры

В корзину

M · 44 px

размер по умолчанию

В корзину

L · 56 px

главное действие на телефоне

Значок · 44 × 44

с подписью для экранной читалки

Большинству сайтов хватает трёх размеров. Маленький — для плотных таблиц и фильтров, средний — по умолчанию, крупный — для главного действия на телефоне. Значок без текста допустим только для действий, которые знают все, — закрыть, поиск, меню, — и у него есть название для экранной читалки.

Под большим пальцем

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

Кнопка под фото

Липкая панель внизу

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

Опасное действие называет себя

«Да» и «Нет» заставляют перечитывать вопрос. Правильная кнопка повторяет действие.

Непонятно

Вы уверены?

Это действие нельзя отменить.

Да Нет

Понятно

Удалить проект «Кухня на Лесной»?

Вместе с ним удалятся 12 эскизов. Восстановить их не получится.

Отмена Удалить проект

В диалоге главное действие стоит в конце ряда, и порядок одинаков во всех окнах сайта — тогда рука запоминает, где «Отмена». Опасное действие получает сигнальный цвет, а где можно — отмену вместо вопроса: «Проект удалён · Вернуть» спокойнее, чем «Вы уверены?».

Кнопки в коде: 2 примера

Правильный элемент для каждого действия, маленькая кнопка с полной областью нажатия и липкая панель для телефона.

Ссылка, кнопка, значок

Вид — от одного класса, элемент — от действия.

actions.html

<!-- Ведёт на другую страницу: ссылка, даже если выглядит как кнопка -->
<a class="button" href="/catalogue/kitchens">Смотреть все 48 кухонь</a>

<!-- Делает что-то здесь: кнопка -->
<button class="button" type="button" data-add-to-cart="oak-table-160">
  В корзину
</button>

<!-- Отправляет форму: подпись называет результат -->
<button class="button" type="submit">Записаться на замер</button>

<!-- Только значок: название — для экранной читалки -->
<button class="icon-button" type="button" aria-label="Закрыть">
  <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
    <path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="1.75"/>
  </svg>
</button>

Область нажатия и липкая панель

Псевдоэлемент увеличивает область нажатия, не меняя вида; панель не заходит под системную полосу внизу экрана.

buttons.css

/* Маленькая кнопка: выглядит на 32px, нажимается на 44px */
.button--small {
  position: relative;
  min-height: 2rem;
}

.button--small::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 2.75rem);
  height: max(100%, 2.75rem);
  transform: translate(-50%, -50%);
}

/* На телефоне цена и главное действие остаются внизу */
@media (max-width: 47.99rem) {
  .buy-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-surface);
  }

  .buy-bar .button {
    flex: 1;
    min-height: 3.5rem;   /* 56px: крупный размер */
  }
}

7 правил для кнопок

01

Одно главное действие на экран

Самая заметная кнопка — та, что ведёт к цели страницы.
02

Глагол и результат

«Получить расчёт», а не «Отправить»: подпись понятна без страницы вокруг.
03

Элемент — по действию

Ведёт куда-то — ссылка; делает что-то здесь — кнопка.
04

44 px и 8 px

Область нажатия не меньше 44 px, между соседними кнопками — не меньше 8 px.
05

Низ экрана телефона

На телефоне главное действие живёт там, куда дотягивается большой палец.
06

Опасное называет себя

«Удалить проект», а не «Да»; где можно — отмена вместо вопроса.
07

Один порядок везде

Главное действие стоит на одном месте во всех окнах и формах сайта.

Частые ошибки с кнопками

Все кнопки главные

Четыре яркие кнопки в ряд — и глаз не знает, с чего начать.
«Отправить» и «ОК»

Приходится гадать, что произойдёт и что получишь в итоге.
div вместо кнопки

На него не перейти с клавиатуры, и экранная читалка не называет его кнопкой.
Значки без слов

Без подписи понятны только «закрыть», «поиск» и «меню»; остальным нужен текст.
Кнопки впритык

Палец попадает в «Удалить» вместо «Изменить».
Главное действие мелкой ссылкой

Цель страницы прячется среди второстепенного.

Вопросы о кнопках

Какого цвета должна быть главная кнопка?

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

Сколько главных кнопок может быть на странице?

Одна на экран. На длинной странице главная кнопка может повторяться в разных секциях, если это одно и то же действие.

Где ставить кнопку в форме?

Под последним полем и по краю полей, чтобы взгляд шёл вниз без скачка.

Нужен ли кнопке значок?

Только если он объясняет действие быстрее: стрелка для шага вперёд, загрузка для файла, плюс для добавления.

Хороша ли кнопка во всю ширину на телефоне?

Для главного действия формы или корзины — да, в неё легко попасть. Второстепенные остаются обычной ширины или становятся текстом.

Что писать на кнопке отправки формы?

То, что человек получит: «Получить расчёт», «Записаться на замер», «Скачать гайд».

Форма

Кнопки,
на которые нажимают

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

Коротко

Ссылка · <a href>

Кнопка · <button>

Ссылка, кнопка, значок

Область нажатия и липкая панель

Одно главное действие на экран

Глагол и результат

Элемент — по действию

44 px и 8 px

Низ экрана телефона

Опасное называет себя

Один порядок везде

Все кнопки главные

«Отправить» и «ОК»

div вместо кнопки

Значки без слов

Кнопки впритык

Главное действие мелкой ссылкой

Какого цвета должна быть главная кнопка?

Сколько главных кнопок может быть на странице?

Где ставить кнопку в форме?

Нужен ли кнопке значок?

Хороша ли кнопка во всю ширину на телефоне?

Что писать на кнопке отправки формы?

Ссылка · `<a href>`

Кнопка · `<button>`

`div` вместо кнопки