
6
Flexible, Multi-Line, Bulletproof Buttons
If you've ever wanted bulletproof buttons that always fit your CTA no matter how big they get, or even multi-line CTAs, here's how:
First make sure you have these xml namespaces:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word">
The markup:
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr>
<td align="center">
<!--BUTTON START-->
<a href="http://www.bing.com" style="display: inline-block; text-decoration: none;">
<!--[if gte mso 9]>
<v:roundrect arcsize="7%" stroke="false" fillcolor="#abcdef" href="http://www.bing.com/" style="mso-wrap-style:none; mso-position-horizontal: center">
<v:shadow on="t" color="#9abcde" offset="0,4pt"/>
<v:textbox inset="25px,15px,25px,10px" style="mso-fit-shape-to-text: t">
<![endif]-->
<div style="background-color:#9abcde; padding-bottom: 5px; border-radius:5px;">
<center style="background: #abcdef; padding: 15px 25px 15px 25px; border-radius: 5px; font-size:16px; line-height: 16px; mso-line-height-alt: 110%; font-family:Tahoma, Geneva, sans-serif;font-weight:bold;color:#345678; text-decoration:none;" class="mso-flex-btn">
<div style="Margin:0 0 5px 0">First Line</div>
<div>Second Line</div>
</center>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:roundrect>
<![endif]-->
</a>
<!--BUTTON END-->
</td>
</tr>
</table>
Fix for undesirable text-wrapping in Outlook 07-13 (place in <head>
):
<!--[if mso]>
<style>
.mso-flex-btn {
margin-right:-0.1in;
text-indent: -0.1in
}
</style>
<![endif]-->
The key parts to making this work:
mso-wrap-style: none
allows the shape to expand to the width and height of its contentsmso-fit-shape-to-text: t
fits the shape to its contents including margins- To control the button padding use
inset
for Outlook 07-13 andpadding
for everything else. - Use
<div>
for each new line. If you use<br/>
Outlook 07-13 forces the button to 100% width. - This only works with text, no tables.
While everything looks good in Litmus I haven't field tested this yet, so use it at your own risk. Happy Easter!
