Как сделать удобные кнопки на сайте

Кнопка это место, где посетитель становится клиентом. Её должно быть легко найти, легко нажать пальцем и легко понять, что произойдёт после нажатия.

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

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

Размер для пальца

Стандарт доступности WCAG 2.2 требует минимум 24×24 пикселя на нажимаемый элемент, но для удобства на телефоне ориентируйтесь на 44–48 пикселей в высоту: такие размеры советуют Apple и Google. Между соседними кнопками оставляйте хотя бы 8 пикселей.

Состояния

• Наведение: чуть темнее или светлее, курсор-рука.
• Нажатие: ещё темнее или лёгкий сдвиг вниз.
• Фокус с клавиатуры: заметная обводка. Не убирайте её через outline: none без замены.
• Неактивная: бледная, но с подсказкой рядом, почему нельзя нажать.

Текст на кнопке

Пишите, что произойдёт: «Записаться на стрижку», «Скачать прайс», «Оформить заказ». Слова «Отправить» и «Далее» ничего не обещают. Текст на кнопке должен иметь контраст не меньше 4,5:1 с её фоном.

Готовый CSS

.btn { display: inline-flex; align-items: center; min-height: 48px;
  padding: 0 24px; border: 0; border-radius: 12px;
  background: #6d3fd8; color: #fff; font: 600 17px/1 system-ui; cursor: pointer; }
.btn:hover { background: #5329c2; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid #ffc23d; outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

Цвет кнопки под свою палитру подберите в палитрах, а для яркой кнопки попробуйте градиент.

Частые вопросы

Какого размера делать кнопки для телефона?

44–48 пикселей в высоту, как советуют Apple и Google. Минимум по WCAG 2.2 это 24×24 пикселя.

Что писать на кнопке?

Что произойдёт после нажатия: «Записаться на стрижку», «Скачать прайс», «Оформить заказ» вместо «Отправить» или «Далее».

Можно ли убрать обводку кнопки при фокусе?

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