Сайт красивый, трафик идёт, а заявок мало. Проверили заголовки, оффер, кейсы — всё в порядке. А кнопку посмотреть не догадались.
Цвет кнопки — не эстетика. Это инструмент управления вниманием. Даже если на кнопке написан идеальный текст, неправильный цвет заставит пользователя её не заметить или не захотеть нажимать.
В этой статье — как цвет кнопки влияет на конверсию, какие цвета работают, а какие убивают заявки, и как протестировать свой вариант за 1 день.
Почему цвет кнопки вообще влияет на клики?
Человек сканирует сайт нелинейно. Глаз цепляется за три вещи:
- Лица (люди, фото).
- Крупный контрастный текст.
- Яркие пятна, отличающиеся от фона.
Кнопка должна быть самым заметным элементом на странице (после заголовка). Если она сливается с фоном или с другими элементами — пользователь пролистывает мимо.
Пример:
На сером фоне кнопка светло-серая — не заметна.
На сером фоне кнопка оранжевая — видна мгновенно.
Разница в контрасте может дать +50% кликов без изменения текста или оффера.
5 ошибок в цвете кнопки, которые убивают конверсию
Ошибка №1. Кнопка сливается с фоном
Как выглядит:
Светло-голубая кнопка на голубом фоне. Серая кнопка на сером. Белая кнопка на белом.
Почему плохо:
Глаз не находит кнопку. Пользователь видит текст, картинки, но не понимает, куда нажимать. В лучшем случае ищет ссылку в тексте. В худшем — уходит.
Как исправить:
Кнопка должна быть самым контрастным элементом на странице. Если фон светлый — кнопка тёмная или яркая. Если фон тёмный — кнопка светлая или неоновая.
Ошибка №2. Кнопка такого же цвета, как и другие элементы
Как выглядит:
На странице есть ссылки, иконки, акценты одного цвета (например, синего). И кнопка тоже синяя.
Почему плохо:
Кнопка теряется среди других элементов. Пользователь может принять её за очередную ссылку и не придать значения.
Как исправить:
Сделайте цвет кнопки уникальным. Пусть на странице больше не будет элементов этого цвета (или их будет совсем мало). Это закрепит ассоциацию: «этот цвет = действие».
Ошибка №3. Кнопка не контрастирует с текстом
Как выглядит:
Белая кнопка на светлом фоне, но на кнопке белый текст — не читается. Или тёмная кнопка, и текст тёмный.
Почему плохо:
Человек видит кнопку, но не может прочитать, что на ней написано. Если текст нечитаем — кликать не будет (боится, что нажмёт не туда).
Как исправить:
Обеспечьте контраст между текстом и фоном кнопки по правилу 4.5:1 (стандарт WCAG). Самый простой способ: белый текст на тёмной кнопке или чёрный текст на очень светлой кнопке.
Ошибка №4. Использование «красного» без причины
Как выглядит:
Кнопка «Купить» — красная, «Отправить» — красная, «Подписаться» — красная.
Почему плохо:
Красный цвет — цвет ошибки, стоп-сигнала, опасности. У многих вызывает подсознательное напряжение. Он работает для кнопок «Удалить», «Отменить», «Не сейчас», но не для позитивного действия.
Исследование: В одном A/B-тесте зелёная кнопка «Начать» обогнала красную на 30% кликов, потому что зелёный ассоциируется с «разрешено», «безопасно», «вперёд».
Как исправить:
Оставьте красный для деструктивных действий. Для позитивных используйте зелёный, синий, оранжевый, жёлтый (на тёмном фоне) или бирюзовый.
Ошибка №5. Кнопка меняет цвет при наведении незаметно
Как выглядит:
Кнопка была синяя, при наведении стала чуть-чуть другого оттенка синего. Разница почти не видна.
Почему плохо:
Пользователь не понимает, что кнопка интерактивна. Он может не решаться нажать, потому что «непонятно, нажимается ли это вообще».
Как исправить:
Сделайте изменение цвета при наведении (или hover на десктопе, и активное состояние на тач-устройствах) заметным: меняйте цвет на противоположный по тону, делайте темнее/светлее на 20–30%, добавляйте тень или обводку.
Какие цвета кнопок работают лучше всего (и почему)
Нет одного «волшебного» цвета, который подойдёт всем. Но есть проверенные сочетания.
Оранжевый
- Где работает: на сайтах с услугами, лендингах, инфобизнесе.
- Почему: ассоциируется с энергией, теплом, действием. При этом достаточно редкий на сайтах, поэтому выделяется.
- С чем сочетать: тёмно-синий, серый, белый фон.
Зелёный
- Где работает: финансы, инвестиции, здоровье, экотовары, кнопки «Скачать», «Начать», «Получить доступ».
- Почему: ассоциируется с деньгами, ростом, безопасностью, разрешением.
- С чем сочетать: белый, светло-серый, тёмно-зелёный фон.
Синий
- Где работает: B2B, корпоративные сайты, IT, банки, консалтинг.
- Почему: вызывает доверие, спокойствие. Но если на сайте много синего — кнопка может потеряться.
- С чем сочетать: оранжевый, жёлтый (для акцента).
Жёлтый / Золотой
- Где работает: акции, скидки, ограниченные предложения, премиум-услуги.
- Почему: привлекает внимание, ассоциируется с выгодой. Но на белом фоне может быть нечитаем — нужна тёмная обводка или тень.
- С чем сочетать: тёмно-синий, чёрный, фиолетовый фон.
Чёрный / Тёмно-серый
- Где работает: люксовые бренды, минималистичный дизайн, креативные агентства.
- Почему: выглядит дорого, премиум. Но на тёмном фоне не сработает.
- С чем сочетать: белый фон, золотой текст.
Важно: цвет кнопки должен сочетаться с брендом, но при этом быть самым ярким элементом. Если ваш фирменный цвет — спокойный синий, а кнопка тоже синяя — она не выделится. Возьмите дополнительный цвет (комплиментарный) именно для кнопок.
Как протестировать цвет кнопки за 1 день (без сложных инструментов)
Вы можете не гадать, какой цвет лучше. Просто протестируйте.
Вариант 1. A/B-тест в рекламном кабинете
- Запустите две одинаковые кампании с одним объявлением, но на разных посадочных страницах (или на одной, но с A/B-тестом в конструкторе).
- Страница А: зелёная кнопка.
- Страница Б: оранжевая кнопка.
- Через 200–300 кликов (обычно 1–2 дня) посмотрите, где больше конверсий.
Вариант 2. Быстрый опрос
- Сделайте скриншот вашего сайта с двумя вариантами кнопок.
- Покажите 5–10 знакомым (или в тематическом чате) и спросите: «Какая кнопка больше привлекает внимание?», «На какую бы вы нажали первым делом?».
Вариант 3. Аналитика поведения (карты кликов)
- Сервисы типа Hotjar, Яндекс.Метрика (Вебвизор) показывают, куда кликают пользователи. Если на вашу кнопку почти не кликают — возможно, проблема не только в цвете, но и в размере или расположении. Цвет — одна из первых гипотез.
Реальный кейс: как смена цвета кнопки подняла конверсию на 43%
Клиент: Интернет-магазин товаров для дома (средний чек 5000 ₽).
Исходные данные: На странице товара была синяя кнопка «Купить» на синем же фоне. Конверсия в корзину — 2,1%.
Гипотеза: Кнопка сливается с фоном и с другими синими элементами (скидки, навигация).
Что сделали: Поменяли цвет кнопки на оранжевый (дополнительный к синему). Текст остался тем же. Также чуть увеличили кнопку и добавили тень.
Результат через 5 дней:
Конверсия выросла до 3,0% (+43%). Дополнительные продажи за месяц: около 120 000 ₽. Вложения: 0 ₽ (просто правка в CSS).
Чек-лист по цвету кнопки
Проверьте свою кнопку прямо сейчас:
- Кнопка заметно отличается от фона (высокий контраст).
- На странице нет других элементов точно такого же цвета.
- Текст на кнопке хорошо читается (контраст 4.5:1).
- Цвет не вызывает негативных ассоциаций (красный — только для отмены).
- При наведении (или тапе) цвет меняется заметно.
- Размер кнопки достаточный (особенно на мобильных).
Если хотя бы один пункт не выполнен — вы теряете заявки.
Что делать, если вы не уверены в своём варианте?
Самый простой способ — заказать аудит конверсии сайта. Я смотрю не только цвет кнопки, но и расположение, текст, оффер, адаптивность. Часто проблема в связке: цвет плохой + кнопка мелкая + текст непонятный. Исправляем всё вместе — и конверсия растёт в 2–3 раза.
📩 Призыв к действию
Хотите узнать, почему ваша кнопка не кликается, и подобрать цвет, который реально работает?
Напишите мне «КНОПКА» в Telegram или через форму на сайте — я бесплатно проанализирую вашу кнопку (цвет, размер, контраст, текст) и пришлю 3 рекомендации, как увеличить клики.