Эффективная кнопка призыва к действию — это ясный глагол + заметный дизайн + уместное расположение. Пишите конкретный «что получит человек сейчас», делайте высокий контраст с фоном, ставьте кнопку там, где принято решение, и учитывайте мобильный экран. Одну главную цель — один яркий клик.
Текст кнопки
Принцип: глагол + ценность + снижение риска
- Начинайте с действия: «Получить», «Скачать», «Записаться», «Оформить» — избегайте абстракций типа «Отправить», «Далее» без контекста.
- Добавляйте конкретику результата: «Скачать чек-лист», «Получить демо», «Посмотреть цены».
- Снижайте perceived risk: «Без карты», «Бесплатно», «За 2 минуты», «Отписка в 1 клик» — если это правда и критично для решения.
- Пишите от первого лица, когда важна личная вовлеченность: «Хочу демо», «Получаю скидку» — это часто повышает CTR.
- Избегайте «кнопок-обманок» и пустых усилителей («Супер-выгода!»). Кнопка должна продолжать мысль заголовка и оффера.
Шаблоны, которые ускоряют работу
| Сценарий | Формула текста | Примеры |
|---|---|---|
| Лид-магнит | Глагол + что именно + без/за N | Скачать гайд без регистрации; Получить чек-лист за 2 мин |
| Покупка | Глагол + товар/план + конкретика | Оформить подписку на 30 дней; Купить со скидкой 15% |
| Запись/демо | Глагол + формат + ближайшее время | Записаться на демо завтра; Бронировать слот на консультацию |
| Контент | Глагол + тип контента | Смотреть вебинар; Читать статью целиком |
| Возврат в корзину | Глагол + объект | Вернуться к корзине; Завершить заказ |
Микрокопирайтинг вокруг CTA-кнопки
- Под кнопкой — микрообещание: «Без спама», «Оплата защищена», «Отмена в один клик».
- Рядом — ограничитель, если уместно: «Только до пятницы», «Осталось 7 мест» — без искусственного дефицита.
- Не дублируйте крупные слова на кнопке в подписи — используйте доп. аргумент.
Цвет и контраст CTA-кнопки
Контраст важнее «правильного» цвета
- Главное — контраст кнопки относительно окружения и достаточная разница яркости/тона. Проверка: отношение контраста текста к фону не ниже 4.5:1.
- Выбирайте цвет, который не «теряется» в палитре письма. Если письмо голубое — кнопка может быть насыщенно-оранжевой/темно-синей; в теплой гамме — холодный акцент.
- Цвет кнопки должен быть консистентен по рассылке: один акцентный цвет = одно целевое действие.
Состояния и доступность CTA-кнопки
- Состояния hover/pressed в веб-версии и адаптивной вьюверы: теневой слой или затемнение на 5–10% для понятности клика.
- Размер шрифта на кнопке — не менее 16 px; вес 600–700; контурные кнопки используйте только при высоком контрасте.
- Не используйте текст на изображениях для ключевого CTA — многие клиенты блокируют картинки.
Размер и место CTA-кнопки
Размер: кликабельно, но не навязчиво
- Минимальная «кликабельная область» — 44×44 px (ориентир для тач-устройств).
- Внутренние отступы: по вертикали 12–16 px, по горизонтали 20–28 px; закругление 4–8 px — для узнаваемости как кнопки.
- Текст не должен переноситься на 3+ строк — это снижает читаемость и «ощущение клика».
Расположение CTA-кнопки: рядом с аргументом
- Первую кнопку ставьте выше первого экрана письма (в области, видимой без скролла) — но после мини-оффера: заголовок → выгода → CTA.
- Повторяйте CTA после ключевых блоков: описание выгод, социальное доказательство, цены. Разные формулировки — одна цель.
- Оставляйте «воздух» вокруг кнопки (минимум 16–24 px) — изоляция повышает заметность и снижает ложные клики по соседним элементам.
Одна или несколько
Один главный клик на экран
- Одна основная кнопка призыва к действию на экране — правило фокуса. Дополнительные действия делайте вторичными: ссылками или контурными кнопками.
- Если письмо длинное — допустимо 2–3 повтора того же CTA в разных секциях с адаптированным текстом.
- Не конкурируйте целями: «Купить сейчас» и «Посмотреть блог» в одном блоке — падает конверсия обеих.
Иерархия CTA
- Primary (заливка, яркий цвет) — ключевая цель письма.
- Secondary (контурная/серый фон) — вспомогательное действие: «Узнать больше», «Скачать PDF спецификаций».
- Tertiary (текстовая ссылка) — сервисные пути: «Отписаться», «Открыть в браузере».
Мобильная версия CTA-кнопки
Кликабельность на маленьком экране
- Ширина кнопки — адаптивная, до 100% контейнера; не ставьте мелкие инлайн-кнопки в два столбца.
- Отступы увеличьте: вертикальные 16–20 px, чтобы палец не задевал соседние элементы.
- Текст 16–18 px, межстрочный 1.2–1.35; избегайте капса на длинных фразах — рваная читаемость на ретина-экранах.
Технические нюансы емейл-клиентов
- Кнопки делайте на HTML/CSS, а не картинкой — рендерится в большинстве клиентов и при выключенных загрузках изображений.
- Используйте безопасные шрифты (Arial, Helvetica, system-ui) или указывайте падение на системный.
- Тестируйте в популярных клиентах: Gmail, iOS Mail, Outlook, Яндекс/Почта Mail.ru; проверяйте темную тему — контраст и инверсию цветов.
Проверка и оптимизация CTA-кнопки
A/B и быстрые проверки
- Тестируйте одну гипотезу за раз: текст на кнопке, цвет, расположение. Метрика — CTR по клику на CTA и последующая конверсия.
- Гипотезы по тексту сильнее: изменение глагола/ценности чаще дает больший прирост, чем смена цвета при хорошем контрасте.
- Используйте heatmap/клик-мэппы в веб-версиях писем и UTM-метки, чтобы отслеживать путь после клика.
Чек-лист перед отправкой
- Формулировка понятна без контекста? Человек понимает, что произойдет после клика.
- Контраст достаточен в светлой и темной темах? Текст не «тонет».
- Есть ли визуальная иерархия CTA vs второстепенные действия?
- Кнопка видна на первом экране и повторена в ключевых местах длинного письма?
- Микрокопирайтинг снижает риск и отвечает на сомнения?
- Кнопка доступна: минимум 44×44 px, читаемый шрифт, не изображение.
Частые ошибки с CTA-кнопками
- Размытый текст («Отправить», «Подробнее») без указания результата.
- Две равнозначные CTA-кнопки в одном блоке, ведущие к разным целям.
- Кнопка в цвете бренда, который сливается с фоном — бренд важен, но приоритет у контраста.
- Ставить CTA до аргументов — растет число «холодных» кликов и отписок.
- Использование изображения как единственной кнопки — скрывается блокировщиком картинок.