Bulletproof html email buttons - html

Question

I've recently started working on creating email templates, and have encountered some issues that I am not finding any explanation for.
I generated buttons from buttons.cm under the expectation that they would be bulletproof, and while they were great for most clients, they failed on web based outlook clients.
The results appeared like this (with slight modifications, explained later)
<table style="width: 100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td style="font-family: arial;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:30px;v-text-anchor:middle;width:150px;font-family:arial;background-color:#72BC00;color:#ffffff;" arcsize="14%" stroke="f" fillcolor="#72BC00">
<w:anchorlock/>
<center>
<![endif]-->
Learn More
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
What I am aiming for is this:
Screen shot of working version
But what I get for all browser based outlook clients is this:
Screen shot of failed version
The problem being that in the failed version
cell padding fails
the buttons are not links anymore, in fact all the styles are taken from the button and applied to the parent table.
the first item is actually supposed to be the last, but it is moved to the top, and stripped of all styles, for no apparent reason.
Is there a solution for this? I have yet to find anything. Thanks!
What I've added to the generated button is: Cell padding, changed display from inline-block to table (fixes the buttons from being 100% width and allows centered text in outlook), and made the containing element a table, not a div.

Answer 1

Buttons.cm was a good resource, but it's getting a little outdated.
I support Outlook but try to avoid VML whenever possible. I currently use something like this:
<!-- Button : Begin -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td">
<a href="http://www.google.com" style="background: #222222; border: 15px solid #222222; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: center; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<span style="color:#ffffff">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
All the are messy, but it's something all clients universally understand.
A second, simpler option is to use border-width to fake padding, like so:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
I am a button →
</td>
</tr>
</table>
</td>
</tr>
</table>
Some email clients (mainly Outlook) don't allow a border-width more than 12 or 15 pixels, and this only works with solid colors, so this some have some drawbacks.
More options for bulletproof buttons are on Litmus.

Answer 2

For #2, are you updating the URL in the VML code as well as the anchor tag? Outlook uses the URL in the VML for the link, not the anchor tag.
This causes a problem for a lot of link tracking systems in email, which is one of many reasons I avoid using these kinds of buttons. We've convinced most clients to go with plain CSS styled buttons, with the understanding that Outlook will loose the rounded corners.

Answer 3

I've been looking for answer for this for ages, either I can make the box link or the word but never both, however I think this may be the answer. I have sent out a few emails using it and it seems to work fine.
<center>
<table align="center" cellpadding="20px" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" style="padding: 15px;height: 60px; width: 100%" class="" ><br>
<br>
Find out more <!--[if mso]> <![endif]--><br>
<br></td>
</tr>
</tbody>
</table>
</center>