email Bulletproof Buttons Border-Based Buttons
Example
This technique relies on adding thick borders to the link itself to build the button's CTA. Using borders is universally understood by email clients, but limit button appearance solid colors.
<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>
The link tag is set to be a block-level element and that borders are used to provide the padding, so the entire button is hoverable + clickable, even in older desktop clients.
The drawback of border-based-buttons is that Outlook will reduce the size of the borders by a small amount and, as mentioned above, background images are not supported.
