|
<!-- |
|
Cross client CTA buttons in email |
|
Originally taken from: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ |
|
|
|
Additions and modifications made due to certain behaviours in email clients |
|
--> |
|
|
|
<!-- |
|
Method #1: Buttons that span the entire space with fixed width/height/line-height |
|
|
|
** Anchor cover entire visisble area |
|
** Windows Phone with EAS can be iffy with fixed width |
|
** The anchor in Outlook won't cover the entire area |
|
--> |
|
|
|
<table cellspacing="0" cellpadding="0"> |
|
<tr> |
|
<td align="center" width="300" height="40" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block;"> |
|
<a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration: none; line-height:40px; width:100%; display:inline-block; color:#fffffe;"> |
|
<span style="color:#fffffe;">Awesome Email Button</span> |
|
</a> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<!-- Improved support for Outlook when using DPI scaling, adding matching width and height via style property --> |
|
|
|
<table cellspacing="0" cellpadding="0"> |
|
<tr> |
|
<td align="center" width="300" height="40" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; display: block; width:300px; height:40px;"> |
|
<a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration: none; line-height:40px; width:100%; display:inline-block; color:#fffffe;"> |
|
<span style="color:#fffffe;">Awesome Email Button</span> |
|
</a> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<!-- |
|
Method #2: Faux buttons, have a similar apperance but the anchor space doesn't span the entire visible area |
|
|
|
** Uses padding rather than fixed size values to create the button |
|
** Generally more friendly to all clients |
|
** Anchor doesn't cover the entire space |
|
--> |
|
|
|
<table border="0" cellpadding="0" cellspacing="0"> |
|
<tr> |
|
<td align="center" valign="middle" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; padding-top:15px; padding-right:35px; padding-bottom:15px; padding-left:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" class="cta-button"> |
|
<a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration:none; color:#fffffe;"> |
|
<span style="color:#fffffe;">Awesome Email Button</span></a> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<!-- |
|
Improved Outlook Support: Rather than using table cells and anchors, VML can be used to create the same shapes |
|
|
|
** Special markup language only Outlook understands |
|
** Create various shapes, where the anchor can cover the entire space |
|
** Requires conditional logic to implement properly |
|
--> |
|
|
|
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828"> |
|
<w:anchorlock/> |
|
<center style="color:#ffffff; font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold;"> |
|
Awesome Email Button |
|
</center> |
|
</v:roundrect> |
|
|
|
<!-- |
|
Using conditional logic: When using the VML method, you must conditionally combine either method #1 or #2 with it. |
|
|
|
** VML code is rendered by all Outlook desktop clients |
|
** All other non Outlook clients use the table CTA button |
|
** Using mso-hide:all; will hide the table CTA button from Outlook desktop clients. |
|
|
|
You should not use a !mso conditional to hide the non Outlook code because Outlook.com will remove all content in conditional comments. |
|
See why: https://gist.github.com/jamesmacwhite/18e97b06f2c04661a757 |
|
--> |
|
|
|
<!--[if mso]> |
|
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828"> |
|
<w:anchorlock/> |
|
<center style="color:#ffffff; font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight:bold;"> |
|
Awesome Email Button |
|
</center> |
|
</v:roundrect> |
|
<![endif]--> |
|
|
|
<table border="0" cellpadding="0" cellspacing="0" style="mso-hide:all;"> |
|
<tr> |
|
<td align="center" valign="middle" bgcolor="#000091" style="font-family: Helvetica, Arial, sans-serif; font-size:16px; font-weight: bold; padding-top:15px; padding-right:35px; padding-bottom:15px; padding-left:35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;" class="cta-button"> |
|
<a href="http://www.EXAMPLE.com/" target="_blank" style="text-decoration:none; color:#fffffe;"> |
|
<span style="color:#fffffe;">Awesome Email Button</span> |
|
</a> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
<!-- Note: If you need to hide a table that happens to have nested table(s) within, you must apply mso-hide:all; to all subsequent tables --> |
