email
Пуленепробиваемые кнопки
Поиск…
Вступление
замечания
Прогрессивное улучшение с помощью медиа-запросов
Для клиентов, поддерживающих мультимедийные запросы, любой из приведенных выше примеров может постепенно увеличивать кнопку.
Например. @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }
Добавить горизонтальное дополнение в Outlook
Условно добавив неразрывное пространство на каждой стороне ссылки на кнопку, можно увеличить горизонтальное дополнение для Outlook. Особенно полезно для кнопок на границе.
`<!--[if mso]> <![endif]-->Link Text<!--[if mso]> <![endif]-->`
Кнопка Buttons.cm
Campaign Monitor построил отличный инструмент, который генерирует код для кнопок в электронной почте HTML. Он использует cominbation os CSS и VML (для Microsoft Outlook) для отображения фоновых изображений или шаблонов на большинстве основных почтовых клиентов.
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
<v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
</v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>
Будет отображаться примерно так:
Примечание . Поскольку интерактивная гиперссылка в Outlook находится внутри тега VML
, некоторые поставщики услуг электронной почты не могут отслеживать клики по этой ссылке.
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
Набивные кнопки
Этот метод опирается на заполнение на уровне ячейки таблицы, чтобы структурировать кнопку, и как атрибуты HTML, так и CSS для стилизации кнопки. Нет VML
означает более простой код, но не фоновые изображения в Outlook.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Недостатком кнопок на основе дополнений является то, что вся область кнопки не доступна, только ссылка в ячейке таблицы.
Пограничные кнопки
Этот метод основан на добавлении толстых границ к самой ссылке для создания CTA кнопки. Использование границ универсально понято почтовыми клиентами, но при этом нажимайте кнопку кнопки сплошных цветов.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Тег link установлен как элемент блочного уровня, а границы используются для обеспечения заполнения, поэтому вся кнопка является зависящей от мыши + кликабельной, даже у более старых настольных клиентов.
Недостатком кнопок на границе является то, что Outlook уменьшит размер границ на небольшую сумму и, как уже упоминалось выше, фоновые изображения не поддерживаются.
Прокладка + Пограничные кнопки
Этот метод использует комбинацию кнопок на основе границы и набивки, создавая связь с пропиской и по крайней мере сплошной границей 1px. Цвет фона должен применяться к вместо этого в этом случае, поскольку Outlook распознает горизонтальное заполнение тега (поскольку это не тег уровня блока).
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
</tr>
</table>
</td>
</tr>
</table>
Недостатком кнопок padding + border-based является то, что он отделяет стиль между тегами <td>
и <a>
, поэтому его трудно поддерживать. Но используется только одна кнопка, конкретные размеры не требуются, а фоновые изображения могут поддерживаться.
Пуленепробиваемая кнопка с распорками
Эта кнопка проистекает из этого примера по Email на Acid. Он полностью основан на кодах, поэтому он будет отображаться без загруженных изображений, а вся кнопка будет зависающей + кликабельной.
Кроме того, этот пример также включает в себя разделители, которые помогают контролировать, сколько вертикального пространства отображается до и после кнопки.
<table width="100%">
<tr>
<td>
<!-- Top Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Top Spacer : END -->
<!-- Button : BEGIN -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!-- Button : END -->
<!-- Bottom Spacer : BEGIN -->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<!-- Bottom Spacer : END -->
</td>
</tr>
</table>