Табличная структура (<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 и отображают кнопку корректно.
