Кнопки можно классифицировать по их внешнему виду и функциональной нагрузке. Правильный выбор типа кнопки помогает выстроить визуальную иерархию и направить внимание пользователя.

Это самые важные кнопки на странице. Их задача — мотивировать пользователя совершить ключевое целевое действие: «Купить», «Зарегистрироваться», «Подписаться». CTA-кнопки должны быть самыми заметными. Обычно они имеют сплошную заливку, контрастный цвет и крупный размер, чтобы мгновенно привлекать взгляд.

Эти кнопки предназначены для менее важных, альтернативных действий. Например, рядом с яркой кнопкой «Добавить в корзину» может находиться менее заметная «Добавить в избранное». Второстепенные кнопки часто делают контурными (прозрачными с рамкой) или менее насыщенного цвета, чтобы они не конкурировали за внимание с главной CTA-кнопкой. Третьестепенные действия могут быть оформлены как простые текстовые ссылки, например, «Отмена».

Представляют собой текст без явного фона или рамки. Они используются для действий с низким приоритетом, чтобы не загромождать интерфейс. Часто их можно встретить в диалоговых окнах («Пропустить», «Узнать больше») или в футере сайта. Несмотря на минималистичный вид, при наведении курсора они должны менять свой стиль, чтобы показать интерактивность.

Вместо текста для обозначения действия используется графическое изображение (иконка). Это экономит место и ускоряет восприятие, если иконка общепринята и понятна без слов (например, корзина, карандаш для редактирования, крестик для закрытия). Однако стоит использовать их с осторожностью, так как неоднозначная иконка может запутать пользователя. Иногда их дополняют всплывающей текстовой подсказкой.

Эти элементы позволяют пользователю переключаться между двумя или несколькими состояниями, например, «Включено/Выключено» или «Светлая тема/Тёмная тема». Их текущее состояние всегда должно быть визуально очевидно.

Это элемент, популяризованный Material Design от Google. FAB представляет собой круглую кнопку-иконку, которая «парит» над остальным контентом, обычно в углу экрана. Она используется для самого главного и частого действия на данном экране, например, «Написать новое письмо» в почтовом клиенте или «Добавить новый контакт» в телефонной книге.

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

Состояние, которое активируется, когда пользователь наводит на кнопку курсор мыши. Кнопка должна визуально измениться — например, стать ярче, поменять цвет фона или тени. Это сообщает пользователю: «Да, я интерактивна, на меня можно нажать».

Состояние в момент нажатия на кнопку. Как правило, кнопка становится темнее или «утапливается» вглубь экрана за счет внутренней тени. Это мгновенное подтверждение для пользователя, что его действие зарегистрировано системой.

Это состояние критически важно для доступности. Оно активируется, когда кнопка выбрана с помощью клавиатуры (например, клавишей Tab). Обычно фокус обозначается заметной рамкой вокруг элемента. Это позволяет людям, которые не могут использовать мышь, понимать, какой элемент сейчас активен. Состояние фокуса не должно пропадать после клика мышью.

Это состояние показывает, что действие в данный момент недоступно. Например, кнопка «Отправить» в форме может быть неактивной, пока не заполнены все обязательные поля. Такие кнопки обычно делают бледными, с пониженной контрастностью, а курсор при наведении на них принимает вид запрещающего знака.

Текст на кнопке должен четко описывать действие, которое произойдет после нажатия. Используйте глаголы: «Скачать отчет», а не просто «Отчет».

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

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

Кнопки должны быть достаточно большими, чтобы в них было легко попасть пальцем на сенсорном экране (рекомендуемый минимальный размер — 44x44 пикселя). Также важно оставлять достаточно свободного пространства вокруг кнопок, чтобы избежать случайных нажатий на соседние элементы.

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