Красиво и стабильно: гайд по дизайну кнопок в письмах

Письмо отправили, а переходов нет. Часто проблема не в оффере, а в кнопке: она может выглядеть неаккуратно, не поместиться в экран или вообще исчезнуть в некоторых почтовиках. В этой статье разберёмся, как сделать кнопку, которая будет не только красивой, но и надёжной. Покажем, как её сверстать, на что обратить внимание в дизайне и как проверить, что она действительно работает как надо.

Какие бывают кнопки в письме и почему не все варианты хорошие

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

Казалось бы, сделать кнопку просто: вставить ссылку, нарисовать кнопку как картинку или сверстать через HTML. Но от того, как именно вы это сделаете, зависит, будет ли кнопка отображаться и работать в разных почтовых клиентах — от Gmail до Outlook. Ниже разберём основные способы оформления кнопок в письмах и покажем, какие из них работают надёжно, а какие могут подвести.

Кнопка в виде изображения

Один из популярных вариантов — сделать кнопку картинкой: отрисовать её заранее и вставить в письмо как <img>. Так дизайнер получает полный контроль над внешним видом: любой шрифт, цвет, форма.

Проблема в том, что изображения далеко не всегда загружаются автоматически. И если кнопка сделана как обычная картинка, пользователь может её просто не увидеть. Кроме того, картинки не всегда адаптивны — на мобильных они могут «расползаться» или выглядеть слишком мелко.

Картинки не загрузились: как спасти рассылку и не потерять подписчиков

Плюсы:

• полная свобода дизайна;
• такая кнопка привлекательна для пользователя.

Минусы:

• может не отображаться без загрузки картинок;
• не адаптируется к экрану (если не сделана специально как responsive image);
• не читается скринридерами — т.е. при анализе письма почтовый клиент не распознает текст на картинке и не поймёт, о чём письмо;
• может увеличивать вес письма.

Да, такие кнопки могут быть очень красивыми, необычными и привлекательными. Но из-за риска, что картинки в письме не отобразятся, этот вариант очень не надёжен и от него лучше отказаться: можно оформить красивый баннер перед кнопкой, но сама она должна быть отдельным элементом.

HTML-кнопка

Это самый надёжный способ. HTML-кнопка — это ссылка, обёрнутая в таблицу и стилизованная как кнопка с помощью inline-стилей. Такой подход позволяет сделать кнопку, которая:

• отображается даже при отключённых картинках;
• адаптируется под разные размеры экрана;
• читается скринридерами;
• не ломается в большинстве почтовых клиентов.

Чтобы добиться максимальной совместимости, такие кнопки верстают с учётом особенностей Outlook и других клиентов. Их называют bulletproof-кнопками — устойчивыми к любым искажениям отображения.

Плюсы:

• надёжность: работает в большинстве почтовиков;
• адаптивность;
• лёгкий вес.

Минусы:

• требует аккуратной вёрстки.

Email — это не веб. Здесь действуют свои ограничения: одни почтовые клиенты не понимают CSS, другие по умолчанию не показывают картинки, третьи искажают отступы. Поэтому методы, которые отлично работают в дизайне сайтов, могут подвести в рассылке.

Изображение-кнопка может не загрузиться. Гиперссылка в тексте может потеряться. А HTML-кнопки — это золотой стандарт. Они показывают себя надёжно в десятках разных клиентов, остаются кликабельными даже при отключённых картинках и легко адаптируются под мобильные. Именно на них стоит делать ставку, если вы хотите, чтобы CTA в письме действительно работал.

Однако вёрстка HTML-кнопки вручную — задача не для новичка. Здесь важно учесть десятки нюансов: от inline-стилей и отступов до особенностей отображения в Outlook и в мобильной версии. Ошибка в одном параметре — и кнопка может «поехать», потерять кликабельность или просто не отобразиться. Но если вы работаете через конструктор писем, всё это уже учтено. Кнопка собирается буквально в пару кликов, а аккуратный HTML-код с адаптивной версткой и нужными стилями выстраивается автоматически.

Всё о конструкторах email-писем: выбор, преимущества и возможности для бизнеса

Гиперссылка в тексте

Проще всего добавить ссылку прямо в текст письма. Это удобно, если в письме уже есть акценты, и не хочется отвлекать внимание от главного. Такие ссылки выглядят нативно, не отвлекают внимание и воспринимаются как часть текста. И это отлично работает в письмах, где ссылок много: пять разных кнопок не вставишь, а пять гиперссылок (и даже больше) — вполне.

С другой стороны, распознать гиперссылку как кнопку действия трудно. Даже если выделить её ярким цветом, вероятность того, что пользователь перейдёт по ссылке, меньше, чем у других видов кнопок. 

Плюсы:

• быстро и просто вставить;
• стабильно работает в любых почтовых клиентах.

Минусы:

• незаметна — особенно на мобильных;
• сложно использовать как главный акцент;
• хуже работает в коротких письмах или письмах с преимущественно визуальным контентом.

Этот вариант часто используют для кнопки отписки от рассылки, как раз для того, чтобы не побуждать пользователя к уходу. В большинстве остальных случаев этот метод может использоваться как дополнение к кнопке (одна и та же ссылка размещается и в тексте, и на кнопке) или если CTA больше двух.

Где размещать кнопки

От того, где находится CTA, зависит, увидит ли его получатель, поймёт ли, что нужно делать, и успеет ли нажать до того, как письмо будет закрыто. Люди часто читают письма бегло. Поэтому задача — не просто вставить кнопку, а сделать так, чтобы она была видимой, логичной и кликабельной в нужный момент. Ниже —  советы, как размещать кнопки в рассылке, чтобы они не терялись из виду.

Размещайте основную кнопку в верхней части письма. Часто пользователи просматривают письмо бегло. Если основная кнопка будет ниже, часть читателей до неё просто не доскроллит. Лучше, чтобы важный CTA был заметен без прокрутки — то есть на первом экране. 

Что делать:

• ставьте кнопку сразу после краткого объяснения — не затягивайте вводный текст;
• убедитесь, что на мобильном кнопка не уезжает за первый экран;
• если вы используете обложку или большое изображение — проверяйте, не «съедают» ли они видимость кнопки.

Повторяйте кнопку внизу письма, если оно длинное. Иногда письма получаются большими: дайджесты, продуктовые подборки, инструкции. Если кнопка встречается только в начале, она теряется по ходу чтения. А если только внизу — не все до неё дойдут.

Что делать:

• используйте один и тот же CTA — не путайте читателя;
• вторую, нижнюю кнопку оформляйте чуть скромнее (меньше акцента, меньше высота);
• не копируйте кнопку в каждый блок — это перегрузит письмо.

Например, письмо с анонсом интенсива от Setters Education: после баннера и приветственного сообщения с краткой информацией — что и когда пройдёт — читатель может сразу перейти по кнопке на страницу с подробностями мероприятия. С ними можно ознакомиться и сразу в письме: в нём подробно рассказано о содержимом и спикерах интенсива. Если после прочтения читатель заинтересован — внизу для удобства кнопка записи дублируется.

Размещайте кнопку рядом с тем, к чему она относится. Кнопка должна быть логически связана с контентом. Если она стоит в отрыве — выше, ниже, сбоку — читателю непонятно, к чему она относится. Также важно, что кнопка — это логическое завершение блока. Её не нужно вставлять в середину, сразу после заголовка.

Что делать:

• размещайте кнопку после заголовка и описания, не до и не между;
• не вставляйте кнопку до того, как человек понял, зачем её нажимать;
• в двухколоночных шаблонах: кнопка — под текстом, не под картинкой.

Следите за визуальной иерархией. Если в письме много кнопок, каждая не может быть главной. Иначе ни одна не сработает. Визуальная иерархия помогает расставить акценты и подсказать, куда нажать:

• основная кнопка — яркая заливка, фирменный цвет, крупный размер шрифта;
• второстепенная кнопка — может иметь такой же или более светлый оттенок, либо фирменным цветом выделены только границы без заливки (т.е. «рамка»), размер и шрифт чуть меньше, где уместно — можно использовать иконки;
• дополнительная информация — гиперссылки, желательно — в ярком фирменном цвете, можно выделить полужирным, если это уместно.

Что делать:

• оформляйте только одну кнопку как главную;
• если CTA несколько, подчиняйте остальные, не конкурируйте с основной;
• сохраняйте стиль: между всеми кнопками и ссылками должно быть визуальное единство.

Что учитывать в дизайне кнопок

На восприятие кнопки влияет всё: цвет, текст, форма, отступы, окружение. Ниже — ключевые дизайнерские принципы, которые помогут сделать кнопку не только технически корректной, но и эффективной.

Пустое пространство

Кнопке нужно «дышать». Если она вплотную прилегает к тексту, другому элементу или краю экрана, её можно не заметить. Пространство вокруг кнопки помогает выделить её визуально, а ещё делает её удобнее для нажатия.

Что учесть:

• оставляйте не менее 12–16 px отступов со всех сторон;
• не размещайте кнопку сразу после заголовка или блока с картинкой — лучше отделить её интервалом.

Цвет кнопки

Цвет должен быть не только фирменным, но и контрастным. Если кнопка сливается с фоном или текстом — она перестаёт быть кнопкой и становится просто цветовым пятном.

Что важно:

• выбирайте цвет, который визуально выделяется на фоне письма;
• не бойтесь использовать яркие цвета, они работают лучше (жёлтый, зелёный, синий, красный);
• проверьте, как цвет кнопки работает в тёмной теме;
• следите за контрастностью: цвет фона и цвет текста должны быть читаемы в паре.

Текст кнопки

Кнопка должна содержать чёткий и конкретный призыв к действию. Формулировки вроде «Узнать больше» или «Нажмите сюда» работают хуже, чем действия с понятным результатом. Также важно не перегнуть с креативом: подписчик должен за секунду понять, какое действие произойдёт, если он нажмёт кнопку.

Как писать:

• используйте глагол + результат: «Получить чек-лист», «Зарегистрироваться на вебинар», «Посмотреть коллекцию»;
• избегайте абстракций вроде «Подробнее» — они подходят только в карточках товаров;
• если кнопка ведёт к покупке, используйте действие в первом лице — «Купить со скидкой», «Получить доступ»;
• сохраняйте длину текста в пределах 1–5 слов.

Размер кнопки

Важно соблюдать баланс. Слишком маленькую кнопку сложно заметить и ещё сложнее нажать. Слишком большая — перегружает письмо, особенно в мобильной версии.

Рекомендации:

• оптимальная высота: 48–72 px, ширина — зависит от текста;
• текст — не менее 14–16 px, шрифт читаемый, без засечек;
• используйте жирное начертание (font-weight: bold), чтобы текст не терялся;
• кнопка должна быть достаточно крупной, но не доминировать над всем остальным.

Форма кнопки

Форма влияет на восприятие кликабельности. Классика — прямоугольник со скруглёнными углами. Но иногда можно экспериментировать, если это соответствует бренду и пользователь ожидает необычных решений.

Как выбирать:

• для универсального письма подойдёт скругление 4–8 px;
• не используйте нестандартные формы, если они не выглядят как кнопка;
• иконки без текста — допустимы только в ограниченных сценариях, когда функция очевидна (например, иконка корзины в карточке товара).

Адаптивность

Письмо может выглядеть идеально в десктопной версии, но «расползаться» на телефоне. Особенно страдают кнопки: они могут стать слишком маленькими или вообще уехать за границы экрана.

Рекомендации:

• в адаптивных письмах используют специальные настройки (их называют медиазапросами), чтобы кнопка автоматически меняла размер на разных экранах — например, становилась шире на телефоне;
• в мобильной версии кнопка должна автоматически растягиваться по ширине экрана — это делают с помощью специальных настроек в шаблоне (display: block; width: 100%);
• избегайте кнопок меньших 44×44 px — это минимум для нажатия пальцем (рекомендация Apple и Google).

Больше о том, как сверстать письмо, которое будет отлично смотреться на разных экранах — в нашем гиде по адаптивной вёрстке email.

Что важно учитывать в HTML-коде кнопок для стабильного отображения

Даже если вы не верстаете письма с нуля, базовые знания HTML помогут проверить, всё ли в порядке с кнопкой и быстро поправить код, если что-то пошло не так. Ниже разбираем, из чего состоит код кнопки и на что стоит обратить внимание.

Что это означает:

Табличная структура (<table>). Почтовые клиенты по-разному обрабатывают CSS. Чтобы кнопка стабильно отображалась везде, её заворачивают в таблицу — это базовая структура, которую понимают даже старые почтовики.

Внутри таблицы используется тег <tr> — это строка, а внутри неё — ячейка <td>, где и размещается кнопка.

Сама кнопка — это тег <a>, то есть ссылка. Её стилизуют с помощью inline-CSS так, чтобы она выглядела как кнопка: задают цвет фона, отступы, шрифт и скруглённые углы.

Цвет фона и скругления (bgcolor, border-radius). Задаются дважды — и на ячейке (<td>), и на ссылке (<a>). Это повышает совместимость: если клиент проигнорирует один слой стилей, другой всё равно сработает.

Размер кнопки (padding). Чтобы кнопкой было удобно пользоваться на сенсорных экранах, внутренняя высота должна быть не менее 42 пикселей. Это достигается с помощью отступов padding, например: 14px 24px.

Шрифт (font-family). Выбирайте универсальные шрифты: Arial, Tahoma, Verdana, Helvetica, Georgia, Times New Roman. Они гарантированно отобразятся в большинстве систем.

Размер шрифта (font-size). Оптимально — от 14 до 18 пикселей. Меньше — плохо читается, особенно на мобильных. Больше — кнопка может «расползтись», то есть потерять баланс.

Цвет текста и заливки (color, bgcolor). Контраст — ваш лучший друг: светлый текст на тёмной кнопке или наоборот. Задаётся кодом, начинающимся с #. Убедитесь, что кнопка выделяется на фоне письма.

Удаление подчёркивания (text-decoration: none). По умолчанию ссылки подчёркнуты. Чтобы кнопка выглядела аккуратно, уберите подчёркивание с помощью text-decoration: none.

Скругление углов (border-radius). По умолчанию — 4 пикселя. Если хочется сделать кнопку более круглой, можно увеличить значение.

Также по желанию можно добавить в код ещё парочку элементов. Чтобы кнопка располагалась по центру, можно добавить align="center" в тег <table>. Также можно добавить внешние отступы с помощью margin (как правило, от 10 до 30 пикселей), чтобы кнопка не прилипала к другим элементам, например:

• margin: 20px 0; — задаёт по 20 пикселей сверху и снизу, 0 по бокам;
• margin-top: 20px; — чтобы отступить от предыдущего блока;
• margin-bottom: 20px; — чтобы отделить кнопку от текста или подвала;
• margin-left и margin-right — если хотите сделать отступ от краёв или других элементов сбоку.

Как настроить HTML-кнопку для Outlook

Outlook — один из самых капризных почтовых клиентов. Особенно это касается версий до 2019, которые используют движок Microsoft Word для рендеринга HTML-контента. Это значит, что Outlook не всегда правильно отображает даже базовый CSS:

• игнорирует border-radius (закругления),
• может не воспринимать padding, margin, display,
• искажает структуру таблиц.

Из-за этого HTML-кнопки без дополнительной поддержки могут выглядеть не так, как вы задумали — текст уезжает, фон исчезает, кнопка расползается. Если вы не уверены, в какой версии и с какого устройства откроет письмо ваш подписчик, лучше подстраховаться и добавить специальную вставку для Outlook.

VML (Vector Markup Language) — это специальный код от Microsoft, который позволяет «рисовать» кнопку в Outlook как фигуру с фоном, текстом и даже закруглениями. Это не заменяет обычную HTML-кнопку, а дополняет её. 

Работает это так: почтовики, которые умеют читать CSS, показывают обычную HTML-кнопку, а старые версии Outlook вместо этого рендерят VML и отображают кнопку корректно.

Как сохранить стабильность, если нужна кнопка в виде картинки

Если письмо требует особого дизайна и однотонной HTML-кнопки недостаточно, можно оформить кнопку картинкой. Например, если вам нужны необычные шрифты, формы, небольшие рисунки на кнопке или особая текстура. Для таких случаев есть способ обезопасить рассылку, если у подписчиков отключено отображение картинок: можно оформить alt-текст к картинке как кнопку.

Обычно alt-текст отображается как простая чёрная подпись на месте изображения. Но его можно сделать более ярким и заметным — задать цвет, размер и стиль шрифта, отступы и выравнивание. Это можно сделать через inline-CSS.

Как оценить эффективность кнопки

Важно не только продумать дизайн кнопки, но и измерить, как она работает: сколько по ней кликают, что делают дальше и какой вариант работает лучше. Это поможет сделать рассылки эффективнее и принимать решения на основе данных.

Используйте UTM-метки и веб-аналитику. Чтобы понимать, что происходит после клика, нужно пометить ссылку с кнопки специальными параметрами — UTM-метками. Они передают в систему аналитики информацию о том, откуда пришёл человек (из письма).

Если в письме две и больше кнопки с одной и той же ссылкой, UTM-метки лучше создать вручную в специальном сервисе — так можно будет сделать их разными, чтобы отследить эффективность каждого CTA-элемента в отдельности.

Что даёт добавление меток:

• можно отследить клики в Яндекс.Метрике или другой системе аналитики;
• можно увидеть, по какой кнопке перешёл пользователь и что он сделал на сайте;
• можно измерить не только кликабельность, но и дальнейшие действия: покупку, регистрацию, просмотр контента.

Встроенные инструменты для аналитики есть и в сервисах рассылок. Например, в Unisender есть карта кликов, которая показывает процент и конкретное число пользователей, которые перешли по гиперссылке или нажали на кнопку. 

Проводите A/B‑тесты кнопок. Если сомневаетесь, какой вариант кнопки сработает лучше, не нужно выбирать наугад — проще протестировать. A/B‑тестирование позволяет отправить двум группам подписчиков разные версии письма (например, с разными цветами кнопки, формулировками или размещением) и сравнить результат.

Что можно тестировать:

• цвет и форма кнопки (например, синяя vs. зелёная, закруглённая vs. прямоугольная);
• текст на кнопке («Смотреть каталог» vs. «Купить сейчас»);
• нужно ли дублировать главную кнопку;
• сколько кнопок добавлять в письмо, не теряется ли пользователь, если их много.