Рабочая CTA-кнопка сочетает четыре вещи: текст с конкретным результатом вместо "Отправить", цвет с контрастом минимум 4,5:1 к фону, высоту от 48 пикселей и повторы минимум 3 раза по странице - на первом экране, в середине и перед футером. Правильная кнопка добавляет 20-40% к конверсии по сравнению с невыразительной.
Почему CTA решает всё
Кнопка целевого действия это последний барьер между посетителем и заявкой. Сколько бы хорошо ни были написаны тексты, если в момент готовности человек не нашёл кнопку или не понял, что на неё нажимать, все предыдущие усилия пропали.
По наблюдениям на лендингах РФ правильно спроектированная CTA-кнопка добавляет 20-40% к конверсии по сравнению с "нормальной но невыразительной". Это вторая по влиянию точка оптимизации после заголовка первого экрана.
Ниже разобраны 5 параметров, которые определяют, работает кнопка или нет.
1. Что писать на кнопке?
Текст кнопки это микро-копирайтинг, который недооценивают. Надписи "отправить", "заказать", "узнать больше" работают плохо. Надписи, которые повторяют пользу или конкретизируют действие, работают сильнее на 15-30%.
Формула рабочего текста
Активный глагол в форме "я сделаю" плюс что именно получит клиент. Примеры:
- Вместо "Отправить" - "Отправить заявку на расчёт".
- Вместо "Узнать цену" - "Получить смету за 15 минут".
- Вместо "Подписаться" - "Получать разбор раз в неделю".
- Вместо "Записаться" - "Записаться на бесплатный разбор".
Ключ - снять неопределённость. Клиент должен понимать, что именно произойдёт после клика: получит звонок, попадёт в чат, увидит форму, подпишется.
Чего на кнопке быть не должно
- Слово "купить" для B2C-услуг с высоким чеком (ремонт, юрист, коуч). Слишком рано для слова "купить", клиент ещё не готов.
- Длинные фразы из 5+ слов. Кнопка теряет читаемость, переносится на вторую строку.
- Вопросительная форма "Хотите записаться?". Добавляет лишний шаг размышления.
- Многозначные глаголы "Смотреть подробнее" без уточнения, что именно там.
2. Какого цвета должна быть кнопка?
Самый частый миф - что "красные кнопки конвертируют лучше". Это неправда. Работает не сам цвет, а контраст кнопки с фоном и остальными элементами страницы.
Правила подбора цвета:
- Цвет кнопки контрастирует с основным фоном страницы.
- Цвет кнопки отличается от акцентных цветов остальных элементов (иконок, ссылок, заголовков).
- Цвет кнопки работает и в dark mode, и в light mode.
Рабочие сочетания
| Фон страницы | Цвет кнопки | Пример ниши |
|---|---|---|
| белый/светло-серый | насыщенный синий #1a4dff | B2B, услуги, стоматология |
| светло-синий | ярко-оранжевый #ff7a00 | барбершоп, авто, спорт |
| белый | ярко-зелёный #0ab678 | эко, здоровье, природа |
| тёмно-синий | жёлтый/золотистый #ffc233 | премиум, B2B, юр. услуги |
| чёрный/антрацит | яркий акцент (оранж, красный) | технологии, сервисы |
Контрастность проверяется инструментом WebAIM Contrast Checker. Минимальное соотношение 4,5:1, оптимальное 7:1. Это не просто про конверсию, это ещё и требование доступности.
3. Размер и пропорции
Минимальный размер кнопки - 48×48 пикселей. Это требование мобильного UX: пальцем в меньшую кнопку попасть сложно, будет промах.
Оптимум:
- Высота кнопки на мобильном - 54-64 пикселя.
- Высота кнопки на десктопе - 48-60 пикселей.
- Ширина кнопки - от 200 пикселей (для коротких текстов) до 340 (для длинных).
- Отступы внутри кнопки - 16 пикселей по горизонтали, 12-16 по вертикали.
- Скругление углов - 6-12 пикселей (слишком большое скругление превращает кнопку в "пилюлю", слишком маленькое - в жёсткий прямоугольник).
Типовые ошибки с размером
- Слишком маленькая кнопка на мобильном. Человек промахивается, раздражается, уходит.
- Огромная кнопка в пол экрана. Выглядит нелепо, не передаёт профессионализм.
- Одинаковая кнопка и в десктопе, и в мобильном без адаптации. На десктопе смотрится нормально, на мобильном либо слишком большая, либо не попасть.
4. Расположение на странице
Кнопка повторяется на странице минимум 3 раза. Один раз - на первом экране без скролла. Один раз - в середине страницы (обычно после блока "как работаем" или "результат"). Один раз - в финальном CTA-блоке перед футером.
Для длинных лендингов (больше 10 блоков) кнопка повторяется 4-5 раз: первый экран, после 3-го блока, после блока гарантий, перед ценами, в финальном CTA.
Правило близости
Кнопка всегда находится рядом с релевантным контентом. Не после длинной простыни текста, а сразу после эмоционального пика: оффера, отзыва, блока с ценой.
Типовая последовательность:
- Оффер → кнопка.
- Процесс работы → кнопка (для тех, кто уже "понял, поехали").
- Отзывы и кейсы → кнопка (для тех, кому хватило социальных доказательств).
- Цена → кнопка (для тех, кто дошёл до финала).
5. Количество кнопок рядом
Спорный вопрос для лендингов без формы. Пользователь хочет написать в Telegram, MAX, позвонить по телефону - какие кнопки показывать.
Лучшее решение - набор из 2-3 равноценных кнопок, все одинакового размера и веса. Цвет может отличаться (Telegram голубой, MAX фиолетовый, звонок зелёный), но кнопки одной высоты и расположены рядом.
Что точно не работает
- Одна главная большая и одна "вторичная" маленькая рядом. Пользователь выбирает между ними, теряет внимание.
- 5 кнопок подряд. Паралич выбора, ничто не нажимается.
- Кнопка целевого действия рядом с кнопкой "узнать подробнее". Ослабляет основной CTA.
Таблица: как улучшить типовые кнопки
| Было | Стало | Прирост конверсии |
|---|---|---|
| Отправить | Получить расчёт за 15 минут | +25% |
| Узнать цену | Рассчитать стоимость ремонта | +20% |
| Записаться | Записаться на бесплатный разбор | +35% |
| Хотите узнать больше? | Показать программу курса | +18% |
| Купить | Оформить заказ с доставкой за 2 часа | +22% |
Замеры из реальных A/B-тестов на трафике 1 000+ визитов на вариант.
Чек-лист: проверка CTA на вашем лендинге
- Текст кнопки отвечает на вопрос "что произойдёт после клика", а не просто "отправить".
- Цвет кнопки контрастирует с фоном в соотношении минимум 4,5:1.
- Размер кнопки 48×48 пикселей и больше.
- Кнопка повторяется 3+ раза на странице.
- Первая кнопка видна на первом экране без скролла на мобильном.
- Нет "вторичных" кнопок рядом с главной.
- Клик по кнопке работает сразу, без задержки на загрузку JS - это часть метрики INP.
- Есть визуальная реакция на нажатие (изменение цвета, лёгкая анимация).
- Кнопка не перекрывается другими элементами (чат, баннер cookies) - такие наезды считаются сдвигом вёрстки, метрикой CLS.
- Текст кнопки одинаков во всех повторениях на странице.
Частые ошибки с CTA
- Меняют текст кнопки на каждом повторении: на первом экране "Отправить заявку", в середине "Узнать цену", внизу "Записаться". Размывает восприятие.
- Ставят кнопку только на первом экране. Кто не кликнул сразу, дальше уже не встретит кнопку до конца страницы.
- Делают кнопку цветом логотипа. Логотип и CTA должны быть разных цветов, иначе кнопка сливается с шапкой.
- Добавляют иконку стрелки внутрь кнопки. Отвлекает внимание, на сам текст смотрят хуже.
- Используют слишком полупрозрачные кнопки (opacity 70%). Выглядит "недокнопкой", не нажимается с уверенностью.
Если сомневаетесь в текущей кнопке, проведите простой A/B-тест: на 50% трафика текст "Отправить", на 50% "Получить расчёт за 15 минут". Через 500 визитов на вариант разница будет заметна.
Частые вопросы
Можно ли делать кнопку красного цвета, если он есть в логотипе?
Можно, если цвет кнопки при этом отличается от остальных акцентных элементов страницы. Проблема не в самом цвете: если кнопка совпадает по оттенку с логотипом или другими элементами, она сливается с фоном и теряется.
Что делать, если на лендинге несколько равнозначных способов связи - Telegram, MAX, звонок?
Показывайте 2-3 кнопки одинакового размера и высоты, можно разного цвета под каждый канал. Не выделяйте одну кнопку как главную, а вторую как второстепенную - это заставляет посетителя выбирать и снижает общее число кликов.
Как часто нужно менять текст CTA на лендинге?
Текст должен быть одинаковым во всех повторениях кнопки на одной странице. Менять его стоит только по результатам A/B-теста и не чаще раза в несколько недель, иначе не наберётся статистики для выводов.
Влияет ли анимация кнопки на конверсию?
Лёгкая реакция на наведение и нажатие помогает: посетитель убеждается, что клик засчитался. Крупная или навязчивая анимация действует в обратную сторону, отвлекает от текста и выглядит небрежно.
Короткий итог
CTA-кнопка это 20-40% конверсии. Текст важнее цвета, размер важнее формы, расположение важнее анимации. Первые три параметра - обязательные к отработке, остальное - тонкая настройка.
Самое простое улучшение, которое можно сделать за 5 минут: заменить "Отправить" на "Получить расчёт за 15 минут" во всех точках на лендинге. В 80% случаев это даёт прирост конверсии 15-25%, просто за счёт более понятного действия.
Проверьте свою главную кнопку сейчас: что на ней написано и ясно ли из текста, что именно произойдёт после клика. Если нет - есть что улучшить.
