CTA-кнопка в email: дизайн, текст и размещение

An email without a clear CTA button is a letter that asks nothing of the reader. You wrote the subject line, built the layout, got past the spam filter — and then the subscriber reads the message and has no idea what to do next. The button is where the whole campaign converges. Its shape, colour, wording, and position determine whether the click happens or doesn’t. Below is what actually matters and what is just decoration.

Why the CTA button is the most expensive element in your email

Every email exists for one reason: to move the reader toward an action. Subscribe, buy, download, register, read more. The CTA button is the physical embodiment of that reason. Everything before it — the subject line, the preheader, the hero image, the copy — is preamble. Everything after it is footnotes.

Campaign Monitor found that button-style CTAs improve click-through rates by 28% compared to plain text links. That’s not surprising: a button provides a visual anchor. When a reader skims an email (and most people skim), the eye lands on the element that looks different from everything else. A coloured rectangle with white text is hard to miss.

But “add a button” is not a strategy. A tiny grey rectangle in the footer is technically a button. Nobody clicks it. The difference between a CTA that converts at 2% and one that converts at 8% lies in specifics: size, colour, text, whitespace, and placement.

Size and shape: the 44-pixel rule

Apple’s Human Interface Guidelines set 44×44 points as the minimum touch target. Google’s Material Design says 48×48 dp. Both exist for the same reason: human fingers are imprecise. If the tap target is smaller, people miss, tap wrong things, and give up.

In practice this means your button should be at least 44 pixels tall. Width depends on the text, but 200-300 pixels is a common range. Full-width buttons (stretching to the edges of the email) work on mobile but look odd on desktop if the email is 600 pixels wide. A good compromise: set the button width to auto with generous horizontal padding (30-40 px each side) so it grows with the label but never collapses below the minimum.

Rounded corners (border-radius 4-8 px) are the current default. Fully rounded pill shapes draw attention but can clash with squared-off layouts. Sharp corners look dated in most contexts except highly formal B2B communications. Pick one shape and stay consistent across campaigns — the subscriber should recognise your button at a glance.

Colour: contrast over preference

There’s a persistent myth that red buttons outperform green ones or that orange is the “best CTA colour.” In isolation, none of that is true. What matters is contrast with the surrounding design. A red button on a red background is invisible. A green button on a white background with no other green elements stands out immediately.

The rule is simple: the button should be the most visually distinct element in the email. If your brand palette is blue and grey, make the CTA orange or bright green. If the email already uses several colours, simplify the background and let the button be the only saturated object.

Accessibility adds a hard constraint: the text-to-background contrast ratio should be at least 4.5:1 (WCAG AA). White text on a yellow button fails this test. White text on a dark blue button passes easily. Check with WebAIM’s contrast checker before locking the colour.

Dark mode complicates things. Apple Mail, Gmail, and Outlook each handle dark mode differently. Some invert background colours, others leave them alone. Test your button in dark mode explicitly. If the background becomes dark, a dark-coloured button may vanish. Use the @media (prefers-color-scheme: dark) query where supported, and always set an explicit border on the button as a fallback: even if the fill colour merges with the background, the border keeps it visible.

Button text: say what happens after the click

“Click here” tells the reader nothing. “Learn more” is vague. “Submit” sounds like homework. The strongest CTA labels describe the outcome from the reader’s perspective: what will they get after they click?

Effective labels follow a pattern:

• Verb + value. “Get the free template,” “Start my trial,” “Download the report.”
• First person works. “Reserve my spot” outperforms “Reserve your spot” in several A/B tests because it feels like the reader’s own decision, not a command.
• Keep it short. Two to five words. Anything longer wraps on mobile and dilutes the punch.
• Avoid generic verbs. “Send,” “Go,” “OK” give no information about what the action produces.

Text size on the button matters. Below 14 px it’s hard to read on mobile. 16-18 px is the sweet spot: legible, confident, doesn’t inflate the button to an absurd height. Use a semi-bold or bold weight so the label is distinct from the body copy surrounding it.

Placement: above the fold is overrated

The web-design reflex is to push the CTA as high as possible. In email, this backfires when the reader hasn’t been given a reason to click yet. If the button appears before the value proposition, you’re asking someone to act on faith. That works for transactional emails (“Confirm your order”), not for marketing ones.

The natural position is immediately after the argument that justifies the action. Describe the problem, present the solution, show proof, then place the button. The reader’s mental state at that point is “yes, I want this” — and the button catches that impulse.

For longer emails, repeat the CTA. One after the main pitch, one at the end. Not three, not five — two. Each repetition gives readers who scroll at different speeds a chance to act without scrolling back up. Use the same label both times. Changing the text between repetitions confuses the reader about what the action actually is.

Whitespace around the button is as important as the button itself. Padding of 20-30 px on all sides prevents the button from competing with neighbouring elements. A button sandwiched between two images or two paragraphs with zero breathing room becomes visual noise, not a focal point.

One CTA vs. many: the paradox of choice

Hick’s Law says decision time increases with the number of options. In email this is brutal: the reader already made one decision (to open), and you have seconds before they move on. Each additional button splits attention and reduces the probability of any single click.

The ideal promotional email has one primary CTA. One action, one button, one colour. If you genuinely need a secondary action (for example, “Buy now” and “See full collection”), make the hierarchy obvious: primary button in full colour, secondary as a text link or an outlined (ghost) button. Never give two buttons equal visual weight. The reader won’t choose — they’ll choose neither.

Newsletters with multiple articles are an exception. Each article block can have its own link. But even here, one item should be visually promoted as the lead story with a full CTA button, while the rest use text links.

Bulletproof buttons: making them work in every client

Outlook for Windows does not render CSS border-radius. It does not support most CSS background properties on links. If your button is a styled <a> tag with background-color and padding, Outlook will show a bare text link. The button disappears.

The fix is the “bulletproof button” technique: use a <table> with a background colour, wrap the <a> tag inside a <td>, and add VML markup for Outlook via conditional comments. Tools like buttons.cm generate this code automatically. It is ugly HTML, but it renders correctly in every major email client including Outlook 2016, 2019, and the new Outlook for Windows.

If you use MJML or similar email frameworks, bulletproof buttons are handled for you. The framework outputs the table-based markup plus VML conditionals. If you code emails by hand, use a generator and test in Litmus or Email on Acid before sending.

Five mistakes that kill click-through rate

1. Image-based buttons. Some designers place the CTA inside a banner image. When images are blocked (Outlook blocks by default, many corporate clients do too), the button vanishes entirely. Always use live HTML text for the CTA label.

2. Invisible buttons on mobile. A button that works on a 1200-pixel screen may shrink to unreadable size on a 375-pixel phone if the email lacks responsive breakpoints. Test at 320px width — the smallest common screen.

3. CTA buried after the fold with no context. If the email has a long image header, the button may sit below the visible area on mobile. Some readers never scroll. Keep the distance from the top of the email to the first CTA under 500 px (roughly two screen heights on a phone).

4. Competing links around the button. A paragraph of text with three underlined hyperlinks, followed by a button, creates a visual mess. The reader’s eye bounces between the links and the button, uncertain which to click. Remove surrounding links or style them as plain text.

5. Broken tracking links. Your ESP wraps every link in a redirect for tracking. If that redirect is misconfigured or goes through a domain with a bad reputation, the click fails or triggers a browser warning. After setting up a campaign, click the button yourself. Check that the destination loads, the UTM parameters are correct, and the redirect doesn’t flag warnings.

A/B testing CTA buttons: what’s worth testing

Button colour, label text, and position are the three variables that produce measurable differences in CTR. Testing border radius or drop shadows is rarely worth the effort — the effects are too small to reach statistical significance on typical email list sizes.

Test one variable per send. Changing the colour and the text at the same time tells you nothing about which factor moved the needle. Run the winning variant for two to three campaigns, then test the next variable. Over a quarter you’ll build a CTA that’s optimised in three dimensions instead of guessing about all three at once.

Minimum sample: 1,000 recipients per variant. Below that, random noise drowns the signal. If your list is smaller, track results across multiple campaigns and compare averages over a month.

Почему CTA-кнопка — самый дорогой элемент письма

Каждое маркетинговое письмо существует ради одного действия: купить, скачать, зарегистрироваться, прочитать. CTA-кнопка — это физическое воплощение этого действия. Всё, что до неё — тема, прехедер, картинка, текст — готовит почву. Всё, что после — примечания.

По данным Campaign Monitor, кнопки повышают CTR на 28% по сравнению с текстовыми ссылками. Логично: кнопка — это визуальный якорь. Когда человек бегло просматривает письмо (а большинство именно так и делает), взгляд цепляется за элемент, который отличается от всего остального. Цветной прямоугольник с белым текстом сложно не заметить.

Но «добавьте кнопку» — это не стратегия. Маленький серый прямоугольник в футере — формально кнопка. Никто на неё не нажимает. Разница между CTR в 2% и CTR в 8% складывается из деталей: размер, цвет, текст, отступы и расположение.

Размер и форма: правило 44 пикселей

Apple Human Interface Guidelines устанавливают 44×44 точки как минимальный размер области нажатия. Google Material Design говорит о 48×48 dp. Причина одна: пальцы неточны. Если область нажатия меньше, люди промахиваются, попадают не туда и закрывают письмо.

На практике это значит: высота кнопки — минимум 44 пикселя. Ширина зависит от текста, но 200-300 пикселей — рабочий диапазон. Кнопки во всю ширину хорошо смотрятся на мобильном, но на десктопе при ширине письма 600 px выглядят избыточно. Хороший компромисс: автоматическая ширина с горизонтальными отступами 30-40 px с каждой стороны. Кнопка растёт вместе с текстом, но не схлопывается ниже минимума.

Скруглённые углы (border-radius 4-8 px) — текущий стандарт. Полностью круглые «пилюли» привлекают внимание, но могут конфликтовать с прямоугольной версткой. Острые углы выглядят устаревшими. Выберите одну форму и используйте во всех рассылках — подписчик должен узнавать вашу кнопку с первого взгляда.

Цвет: контраст важнее предпочтений

Существует устойчивый миф, что красные кнопки работают лучше зелёных или что оранжевый — «лучший цвет для CTA». Ни одно из этих утверждений не верно само по себе. Значение имеет контраст с окружающим дизайном. Красная кнопка на красном фоне невидима. Зелёная кнопка на белом фоне без других зелёных элементов бросается в глаза сразу.

Правило простое: кнопка должна быть визуально самым отличающимся элементом в письме. Если палитра бренда — синий и серый, сделайте CTA оранжевым или ярко-зелёным. Если в письме уже много цветов, упростите фон и оставьте кнопку единственным насыщенным объектом.

Доступность добавляет жёсткое ограничение: контрастность текста к фону кнопки — минимум 4.5:1 по WCAG AA. Белый текст на жёлтой кнопке этот тест не проходит. Белый текст на тёмно-синей кнопке — проходит с запасом.

Тёмная тема усложняет задачу. Apple Mail, Gmail и Outlook обрабатывают тёмный режим по-разному. Тестируйте кнопку в тёмной теме отдельно. Всегда задавайте явную обводку (border) — даже если заливка сольётся с фоном, рамка сохранит кнопку видимой.

Текст кнопки: опишите, что произойдёт после клика

«Нажмите здесь» не говорит ничего. «Подробнее» — размыто. «Отправить» звучит как домашнее задание. Сильные CTA описывают результат с точки зрения читателя: что он получит после клика?

Рабочие шаблоны:

• Глагол + ценность. «Скачать бесплатный шаблон», «Начать пробный период», «Получить отчёт».
• Первое лицо работает. «Забронировать моё место» обгоняет «Забронировать ваше место» в ряде A/B-тестов, потому что ощущается как собственное решение, а не команда.
• Коротко. Два-пять слов. Длинный текст переносится на мобильном и теряет акцент.
• Избегайте общих глаголов. «Ок», «Далее», «Перейти» не дают информации о результате действия.

Размер шрифта на кнопке: ниже 14 px — плохо читается на мобильном. 16-18 px — рабочая зона: разборчиво, уверенно, не раздувает кнопку до абсурдной высоты. Используйте полужирное или жирное начертание, чтобы надпись отличалась от окружающего текста.

Расположение: «выше сгиба» переоценено

Рефлекс веб-дизайнера — поставить CTA как можно выше. В email это работает против вас, если читатель ещё не получил повод кликнуть. Кнопка до описания ценности — это просьба действовать на веру. Для транзакционных писем («Подтвердите заказ») это нормально. Для маркетинговых — нет.

Естественная позиция — сразу после аргумента, который обосновывает действие. Описали проблему, показали решение, привели доказательство — и ставите кнопку. Читатель в этот момент думает «да, мне это нужно», и кнопка ловит этот импульс.

Для длинных писем повторяйте CTA дважды: один раз после основного питча, второй — в конце. Не три раза, не пять — два. Одинаковый текст на обеих кнопках. Разный текст сбивает читателя с толку: он не понимает, одно и то же это действие или разные.

Белое пространство вокруг кнопки важно не меньше, чем сама кнопка. Отступы 20-30 px со всех сторон не дают кнопке конкурировать с соседними элементами. Кнопка, зажатая между двумя картинками без воздуха, становится визуальным шумом, а не точкой фокуса.

Одна кнопка или несколько: парадокс выбора

Закон Хика: время принятия решения растёт с количеством вариантов. В email это критично: читатель уже принял одно решение (открыть), и у вас секунды, прежде чем он уйдёт. Каждая дополнительная кнопка делит внимание и снижает вероятность любого клика.

Идеальное промо-письмо содержит одну основную CTA. Одно действие, одна кнопка, один цвет. Если вам действительно нужно второе действие («Купить» и «Посмотреть коллекцию»), сделайте иерархию очевидной: главная кнопка с заливкой, вторичная — текстовая ссылка или обводочная (ghost) кнопка. Никогда не давайте двум кнопкам одинаковый визуальный вес. Читатель не выберет — он не выберет ничего.

Bulletproof-кнопки: как добиться рендеринга во всех клиентах

Outlook для Windows не рендерит CSS border-radius. Не поддерживает большинство CSS-свойств фона на ссылках. Если ваша кнопка — стилизованный тег <a> с background-color и padding, Outlook покажет голую текстовую ссылку. Кнопка исчезнет.

Решение — техника «bulletproof button»: таблица (<table>) с фоновым цветом, ссылка внутри <td> и VML-разметка для Outlook через условные комментарии. Инструменты вроде buttons.cm генерируют этот код автоматически. HTML получается некрасивый, зато кнопка рендерится корректно во всех основных почтовых клиентах, включая Outlook 2016, 2019 и новый Outlook для Windows.

Если используете MJML или аналогичные фреймворки, bulletproof-кнопки генерируются автоматически. Если верстаете руками — используйте генератор и тестируйте в Litmus или Email on Acid перед отправкой.

Пять ошибок, которые убивают CTR

1. Кнопка-картинка. Некоторые дизайнеры размещают CTA внутри баннерного изображения. Когда картинки заблокированы (Outlook блокирует по умолчанию, многие корпоративные клиенты тоже), кнопка исчезает. Всегда используйте живой HTML-текст для надписи на кнопке.

2. Невидимая кнопка на мобильном. Кнопка, которая работает на экране 1200 px, может сжаться до нечитаемого размера на телефоне 375 px, если в письме нет адаптивных брейкпоинтов. Тестируйте при ширине 320 px.

3. CTA далеко от начала письма без контекста. Если перед кнопкой стоит массивная шапка-картинка, на мобильном кнопка окажется ниже видимой области. Часть читателей никогда не долистает. Расстояние от начала письма до первой CTA — не больше 500 px.

4. Конкурирующие ссылки рядом с кнопкой. Абзац текста с тремя подчёркнутыми гиперссылками, а следом кнопка — визуальный хаос. Взгляд мечется между ссылками и кнопкой. Уберите окружающие ссылки или стилизуйте их как обычный текст.

5. Сломанные трекинговые ссылки. ESP оборачивает каждую ссылку в редирект для трекинга. Если редирект настроен криво или проходит через домен с плохой репутацией, клик не срабатывает или вызывает предупреждение браузера. После настройки кампании нажмите на кнопку сами. Проверьте, что целевая страница загружается, UTM-метки корректны и редирект не вызывает предупреждений.

CTA бесполезна, если письмо не дошло

Можно сделать идеальную кнопку: правильный цвет, точный текст, грамотное расположение. Но если письмо ушло в спам или отскочило от невалидного адреса — эту кнопку никто не увидит. Кликабельность письма начинается с доставляемости. Доставляемость начинается с чистой базы.

Bounce rate выше 2% бьёт по репутации домена. Спам-ловушки в базе — ещё хуже. А невалидные адреса искажают A/B-тесты кнопок: вы сравниваете CTR двух вариантов, а часть получателей — мёртвые ящики, которые не кликнут ни на одну кнопку. Результат теста — шум, а не сигнал.

Валидация базы перед отправкой занимает минуты. Вы загружаете список, получаете отчёт: валидные адреса, рискованные, мёртвые. Удаляете мусор — bounce rate падает, репутация растёт, письма начинают доходить. И только после этого имеет смысл оптимизировать CTA.

Идеальная кнопка в письме, которое не дошло, — это идеальная кнопка, которую никто не увидел. Сначала доставляемость, потом дизайн.