Кнопка — самый недооценённый элемент сайта. Она кажется простой: прямоугольник, надпись, цвет. Но именно кнопка отвечает за главное действие пользователя — отправку формы, покупку, подписку. Плохо спроектированная кнопка теряет клики. Хорошо спроектированная — превращает посетителей в клиентов.
Это руководство проведёт через весь путь создания кнопки сайта: от идеи и дизайна до HTML-кода, стилей и тестирования. Материал подойдёт и тем, кто делает первый сайт, и тем, кто хочет систематизировать знания.
Содержание
- Какие бывают кнопки и чем они отличаются
- Пять правил кнопки, которую нажимают
- Создание кнопки в конструкторе сайтов
- Кнопка на HTML и CSS: пошагово
- Интерактив: эффекты наведения
- Типичные ошибки и чек-лист
Какие бывают кнопки и чем они отличаются
Прежде чем создавать кнопку, нужно понять её роль. На сайте встречаются три основных типа, и путать их — частая ошибка новичков.
Кнопка действия
Выполняет действие на странице: отправляет форму, добавляет товар в корзину. Создаётся тегом <button>
Кнопка-ссылка
Ведёт на другую страницу. Создаётся тегом <a>, стилизованным под кнопку
Кнопка-переключатель
Меняет состояние: включает уведомления, переключает тему. Часто выглядит как тумблер
Пять правил кнопки, которую нажимают
Текст говорит, что произойдёт
«Скачать прайс» работает лучше, чем «Отправить». «Получить расчёт» лучше, чем «ОК». Пользователь должен знать результат нажатия до того, как нажмёт.
Контраст с фоном
Кнопка не должна сливаться со страницей. Если сайт светлый — кнопку делают яркой. Красный (#D80621) на белом фоне даёт отличный контраст и привлекает взгляд первым.
Достаточный размер
Минимальная высота кнопки для мобильных — 44 пикселя. Меньше — по ней трудно попасть пальцем, и часть пользователей просто не сможет нажать.
Визуальный отклик
При наведении и нажатии кнопка должна реагировать: менять цвет, слегка увеличиваться или опускать тень. Это подтверждает пользователю, что элемент интерактивен.
Одна главная кнопка на экран
Если на экране пять одинаково ярких кнопок, пользователь не знает, куда смотреть. Главное действие выделяют, второстепенные делают приглушёнными.
Создание кнопки в конструкторе сайтов
Если сайт собран на конструкторе (Tilda, Wix, WordPress с визуальным редактором), кнопка создаётся без кода. Общая логика одинакова почти везде:
Шаг 1
Добавьте блок «Кнопка» из панели элементов на страницу
Шаг 2
Впишите текст, описывающий результат действия
Шаг 3
Настройте цвет, размер и скругление углов в панели стилей
Шаг 4
Привяжите действие: ссылку на страницу, форму или всплывающее окно
Шаг 5
Проверьте отображение на телефоне в режиме предпросмотра
Кнопка на HTML и CSS: пошагово
Для тех, кто работает с кодом напрямую, базовая кнопка создаётся за минуту. Вот минимальный рабочий пример:
<button style="
background-color: #D80621;
color: #FFFFFF;
border: none;
padding: 14px 32px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
">Получить консультацию</button>Разберём ключевые свойства — они определяют 90% внешнего вида кнопки:
| Свойство | За что отвечает | Рекомендация |
|---|---|---|
background-color | Цвет фона кнопки | Контрастный к фону страницы |
padding | Внутренние отступы (размер) | Не менее 12px по вертикали и 24px по горизонтали |
border-radius | Скругление углов | 4–8px — современный вид; 50px — «таблетка» |
font-size | Размер текста | Не менее 15–16px для читаемости |
cursor: pointer | Курсор-«рука» при наведении | Обязательно — иначе кнопка выглядит «мёртвой» |
Интерактив: почувствуйте разницу в эффектах наведения
Наведите курсор (или нажмите на телефоне) на каждую кнопку и сравните ощущения. Все четыре кнопки выполняют одну функцию — но воспринимаются совершенно по-разному.
Статичная, «мёртвая»
Классический hover
Эффект «оживания»
Эффект «подъёма»
Скругление углов: как радиус меняет характер кнопки
Передвигайте ползунок и смотрите, как одно свойство border-radius превращает строгий прямоугольник в мягкую «таблетку».
border-radius: 0px
Типичные ошибки при создании кнопок
✕ Ошибка: текст «Нажмите сюда»
Пользователь и так понимает, что кнопку нужно нажать. Текст должен описывать результат: «Скачать каталог», «Записаться на вебинар».
✕ Ошибка: прозрачная кнопка на пёстром фоне
Outline-кнопки теряются на фотографиях и градиентах. Главная кнопка должна быть залита сплошным контрастным цветом.
✕ Ошибка: ссылка вместо кнопки в форме
Отправка формы — это действие, а не переход. Используйте <button type="submit">, иначе сломается и логика формы, и доступность.
✕ Ошибка: кнопка меньше 44 пикселей
Больше половины трафика — мобильный. Маленькая кнопка просто не даёт по себе попасть пальцем, и пользователь уходит.
Финальный чек-лист перед публикацией
- ✓Текст кнопки описывает результат действия, а не само действие
- ✓Цвет контрастирует с фоном страницы
- ✓Высота кнопки не меньше 44 пикселей
- ✓Есть визуальный отклик при наведении и нажатии
- ✓Кнопка проверена на компьютере и на телефоне
- ✓На экране только одна главная кнопка
Кнопка — точка, где интерес посетителя превращается в действие. Потратьте на неё те же полчаса внимания, что и на заголовок страницы, — и сайт ответит ростом конверсии.