Кнопка в письме не кликается: почему так и как починить
Шесть симптомов и один код, который работает во всех клиентах
Mailvex · 31 августа 2026 · 4 мин чтения
Кнопка выглядит как кнопка, но нажимается только по надписи, а в Outlook теряет фон и скругления. Причина в том, что почтовые клиенты по-разному понимают отступы и фон, а классический Outlook вообще использует движок текстового редактора. Решение — собрать кнопку на таблице и добавить отдельный код для Outlook.
Почему кнопка ломается именно в письмах
На сайте кнопка делается за одну строку: ссылка получает фон, отступы и скругления. В письме этот способ работает только в части клиентов.
Классический Outlook для Windows игнорирует отступы у ссылки и не понимает скругления. Результат: вместо кнопки — цветной прямоугольник, у которого кликается только текст, и то без запаса по краям.
Проблема не косметическая. Человек целится в кнопку, попадает в отступ, ничего не происходит — и он закрывает письмо, решив, что ссылка сломана.
Шесть симптомов и их причины
Шесть симптомов покрывают почти все случаи. Найдите свой и посмотрите причину.
| Симптом | Причина | Решение |
|---|---|---|
| Кликается только текст | отступы заданы у ячейки, а не у ссылки | перенести отступы на саму ссылку |
| В Outlook кнопка без фона | фон задан у блока, который Outlook игнорирует | фон на ячейке таблицы плюс код VML |
| Кнопка потеряла скругления | Outlook не поддерживает скругления | код VML со скруглением, для остальных обычный код |
| Кнопка растянулась на всю ширину | ссылка сделана блочной без ограничения | задать ширину таблице, а не ссылке |
| Ссылка не открывается | относительный адрес или опечатка | полный адрес с https, проверить переход |
| Кнопка съехала на телефоне | фиксированная ширина больше экрана | ширина в процентах, минимальная высота 48 пикселей |
Первая строка встречается чаще остальных вместе взятых.
Готовый код надёжной кнопки
Надёжная кнопка собирается из двух частей: кода VML для Outlook и обычной таблицы для остальных клиентов. Каждый клиент видит только свою часть.
Разберём ключевые места. Условный комментарий в начале показывает блок только Outlook, второй комментарий — только остальным клиентам. Отступы заданы у самой ссылки, а не у ячейки, поэтому кликается вся площадь.
Фон продублирован: у ячейки таблицы атрибутом и в стилях. Часть клиентов понимает одно, часть другое.
Размер кнопки на телефоне
Размер кнопки на телефоне — отдельная тема, где чаще всего ошибаются.
Минимальная высота кнопки для пальца — 44 пикселя, лучше 48. Меньше — и попадание становится делом удачи, особенно на ходу.
Ширину на узком экране лучше задавать в процентах, а не в пикселях. Кнопка в 320 пикселей на экране в 320 пикселей упрётся в края и вылезет за пределы письма.
Что проверить перед отправкой
- открыть письмо на телефоне и нажать по краю кнопки, а не по центру
- проверить в Outlook: есть ли фон и скругления
- пройти по ссылке и убедиться, что она открывается
- посмотреть в тёмной теме: не слился ли текст кнопки с фоном
- убедиться, что адрес полный и начинается с https
Первый пункт важнее остальных: именно попадание по краю показывает, кликается кнопка целиком или только надпись.
Как это решается в конструкторе
В конструкторе Mailvex кнопка — готовый блок, а компилятор сам добавляет код VML для Outlook, дублирует фон и задаёт минимальную высоту для мобильных.
Скругления, цвет и размер настраиваются в брендбуке один раз и применяются ко всем кнопкам во всех письмах.
Соберите письмо с кнопками, которые работают везде.
Смотреть шаблоныЧастые вопросы
Почему кнопка кликается только по тексту?
Отступы заданы у ячейки таблицы, а не у самой ссылки. Ссылка занимает только площадь надписи, а отступы к ней не относятся. Решение — перенести отступы на ссылку и сделать её блочной.
Зачем нужен отдельный код для Outlook?
Классический Outlook для Windows использует движок текстового редактора вместо браузерного. Он не понимает скругления, игнорирует отступы у ссылки и не показывает фон у блоков. Код VML — единственный способ получить в нём нормальную кнопку.
Какой минимальный размер кнопки на телефоне?
Высота от 44 пикселей, лучше 48. Это минимум для уверенного попадания пальцем. Ширину на узком экране задавайте в процентах, а не в пикселях, иначе кнопка вылезет за края письма.
