Что такое CTA и почему это не просто кнопка
CTA — Call to Action, призыв к действию. По сути, это любой элемент интерфейса, который подталкивает пользователя к целевому действию: купить, записаться, скачать, оставить заявку.
Но вот в чём штука: CTA — это не только прямоугольник с текстом. Это комбинация нескольких вещей одновременно:
- текст на кнопке (что именно вы просите сделать)
- визуальное оформление (цвет, размер, форма, тень)
- расположение на странице (где пользователь видит кнопку)
- контекст вокруг (что написано до кнопки и после неё)
Уберите один из этих элементов — и конверсия просядет. Это проверено десятки раз.
Тексты для кнопок: что писать, а что точно не стоит
Начну с текста, потому что именно он решает больше половины успеха. Вот реальные примеры, которые используются на проектах, и как они себя показали.
Формулировки, которые работают
Для интернет-магазинов и товаров:
- «Добавить в корзину» — классика. Работает стабильно, потому что понятна и привычна
- «Купить за 2 490 ₽» — с ценой прямо в кнопке. Конверсия обычно выше, чем у просто «Купить», потому что снимает неопределённость
- «Забрать со скидкой» — хорошо заходит на акционных лендингах
Для услуг и B2B:
- «Получить расчёт» — мягче, чем «Купить». Подходит для дорогих или сложных услуг
- «Обсудить проект» — работает в портфолио и на страницах агентств
- «Записаться на консультацию» — для образования, медицины, юристов
Для подписок и контента:
- «Попробовать бесплатно» — снижает барьер входа
- «Получить гайд» — конкретно и понятно, что получит пользователь
- «Начать сейчас» — создаёт ощущение лёгкого старта
Чего лучше избегать
«Отправить» — самый частый грех. Пользователь не понимает, что произойдёт после нажатия. Отправить что? Куда? Зачем?
«Нажмите сюда» — это из нулевых, пора забыть.
«Подробнее» — слишком абстрактно. «Смотреть каталог» или «Читать кейс» сработают лучше.
Слишком длинные формулировки тоже вредят. «Зарегистрироваться и получить доступ к платформе» — это не текст кнопки, это предложение. Максимум 3–4 слова, дальше начинается каша.
Цвет кнопки и конверсия: где правда, а где мифы
Про цвет кнопок написано столько, что можно защитить диссертацию. «Красные кнопки увеличивают конверсию на 21%!» — подобные заголовки встречаются повсюду. Давайте разберёмся, как это работает на самом деле.
Контраст важнее конкретного цвета
Нет одного «правильного» цвета. Есть правило контраста: кнопка должна визуально выделяться на фоне остальных элементов страницы. Если у вас сайт в сине-белых тонах, оранжевая кнопка будет заметной. Если фон тёмный — светлая кнопка. И наоборот.
Когда кнопка сливается с дизайном, люди её буквально не видят. Она может быть идеально стилизована, с красивой тенью и анимацией — но если нет контраста с окружением, толку ноль.
Какие комбинации применяются чаще всего
На проектах в 2025–2026 годах чаще всего встречаются такие комбинации:
Тёмный фон сайта → яркая акцентная кнопка. Например, на лендинге с тёмным фоном зелёный или ярко-жёлтый CTA сразу бросается в глаза.
Светлый сайт → контрастный тёмный или насыщенный цвет. Глубокий синий, уверенный зелёный, иногда — терракотовый. Зависит от бренда.
Красный — стоит использовать осторожно. Красный хорошо привлекает внимание, но может восприниматься как предупреждение или ошибка. На формах рядом с валидацией — плохая идея. На акционном лендинге с таймером — может сработать.
Состояния кнопки: то, о чём часто забывают
Хорошая кнопка — это не один статичный цвет. Это как минимум четыре состояния:
- Обычное — базовый вид
- При наведении (hover) — небольшое изменение, чтобы пользователь понял, что элемент кликабельный
- При нажатии (active) — визуальная обратная связь
- Неактивное (disabled) — когда кнопка недоступна (например, форма не заполнена)
Если кнопка никак не реагирует на наведение — пользователь может решить, что она декоративная. На A/B-тестах добавление hover-эффекта увеличивало CTR кнопки на ощутимые проценты.
Размер, форма и отступы: мелочи, которые меняют картину
Размер кнопки
По рекомендациям Google для мобильных интерфейсов, минимальная область нажатия — 48×48 пикселей. Но для основного CTA на лендинге обычно делают значительно больше: padding 16–20px по вертикали и 32–48px по горизонтали. Кнопка должна быть заметной и удобной, особенно на телефоне.
На мобильных часто имеет смысл делать CTA-кнопку на всю ширину экрана. Палец не промахнётся — и визуально она доминирует на экране, что для лендинга идеально.
Скруглённые или прямые углы?
Тренд последних лет — мягкое скругление (border-radius: 8–12px). Полностью круглые кнопки (border-radius: 50px) выглядят дружелюбно, но не везде уместны. Прямые углы могут подойти строгому корпоративному сайту.
Совет из практики: скругление в 8px — это почти универсальный вариант. Смотрится современно и не перетягивает внимание с содержания.
Воздух вокруг кнопки
Это критически важный момент. Если CTA-кнопка прижата к тексту, картинке или другим элементам — она теряется. Дайте ей пространство. Минимум 24–32px отступа со всех сторон, а лучше больше.
Часто именно добавление «воздуха» вокруг кнопки даёт больший эффект, чем смена цвета или текста. Просто потому что пользователь наконец её замечает.
Расположение CTA на лендинге: где размещать кнопку
Первый экран — обязательно
Основной CTA должен быть виден без прокрутки. Это правило номер один для любого лендинга. Пользователь зашёл на страницу, прочитал заголовок и подзаголовок — и вот она, кнопка. Не нужно заставлять его скроллить вниз.
Повторяйте CTA по ходу страницы
Длинный лендинг? Ставьте кнопку после каждого смыслового блока. После описания продукта, после отзывов, после блока с ценами, перед футером. Пользователь может «дозреть» на любом этапе, и в этот момент кнопка должна быть рядом.
На одном проекте добавление промежуточного CTA после блока с кейсами дало рост конверсии формы — часть людей просто не доходила до финального блока, а тут кнопка оказалась под рукой.
Фиксированная кнопка на мобильных
На мобильных устройствах часто имеет смысл закрепить CTA в нижней части экрана (sticky-кнопка). Пользователь скроллит, читает — а кнопка всегда доступна. Главное — не перекрывать контент и дать возможность её свернуть или скрыть.
Как оформить кнопку «Купить»: чек-лист разработчика
Набор правил, которые стоит использовать на каждом проекте.
По тексту:
- Формулировка от первого лица или с выгодой: «Получить скидку», «Забронировать место»
- Если есть цена — включить в кнопку или рядом
- Избегать абстракций: никаких «Далее» и «Отправить», если можно написать конкретнее
По дизайну:
- Контрастный цвет относительно фона
- Достаточный padding (не менее 12px по вертикали, 24px по горизонтали)
- Скругление 8–12px для современного вида
- Hover-состояние обязательно: изменение цвета, тени или масштаба
- Иконка (стрелка, корзина) помогает, но не обязательна
По расположению:
- Выше линии сгиба (первый экран)
- Повторять после ключевых блоков
- На мобильных — достаточный размер для нажатия пальцем
По техническим деталям:
- Использовать тег `<button>` или `<a>` с ролью — не `<div>` с обработчиком клика
- Добавить атрибут `aria-label`, если текст кнопки неочевиден
- Обеспечить фокус при навигации с клавиатуры (outline при :focus-visible)
- Анимация загрузки после нажатия: кнопка не должна «зависнуть» молча
Ошибки, которые встречаются постоянно
Типовые промахи, которые убивают конверсию.
Кнопка-невидимка. Прозрачная кнопка с тонкой рамкой на светлом фоне. Выглядит стильно — но её не видно. CTA-кнопка не то место, где нужно экономить на заметности.
Слишком много кнопок. Когда на одном экране три равнозначных CTA — «Купить», «Узнать больше», «Позвонить» — пользователь теряется. Принцип простой: один экран — один главный призыв к действию. Остальные — вторичные, менее заметные.
Кнопка далеко от аргумента. Блок отзывов заканчивается, пользователь воодушевлён — а кнопка где-то внизу, через два экрана. Размещайте CTA сразу после убедительного контента.
Нет обратной связи. Пользователь нажал кнопку — и ничего не произошло. Ни анимации, ни перехода, ни сообщения. Он нажимает ещё раз. И ещё. Три дубля заявки в CRM — и разочарованный клиент.
Несколько слов про A/B-тесты
Идеальной формулы CTA не существует. Всё зависит от аудитории, продукта, контекста страницы. Именно поэтому важно тестировать.
Но тестировать нужно правильно. Типичная ошибка — менять всё сразу: и текст, и цвет, и размер, и расположение. Потом непонятно, что именно повлияло. Меняйте по одному параметру за раз. Сначала текст. Потом цвет. Потом расположение.
Из инструментов: в Яндекс Метрике есть вебвизор и карта кликов — для анализа хватает. Для полноценных A/B-тестов подойдут специализированные сервисы вроде VWO. Многие CMS и конструкторы сайтов в 2026 году уже имеют встроенный функционал сплит-тестирования.
Итого: что стоит запомнить
Если сжать всё вышесказанное до нескольких мыслей:
CTA-кнопка — это не декоративный элемент и не место для творческих экспериментов дизайнера. Это рабочий инструмент, который должен быть заметным, понятным и доступным.
Пишите на кнопке то, что получит пользователь: не «Отправить», а «Получить расчёт». Делайте кнопку контрастной к окружению. Размещайте её там, где пользователь готов к действию. Не забывайте про мобильные устройства — больше половины трафика идёт с телефонов.
И тестируйте. Всегда тестируйте. Потому что единственный способ узнать, какой CTA работает лучше на вашем сайте — это проверить это на реальных пользователях.