Email Development
The Last Bulletproof Button You’ll Ever Need
Email Development
Buttons can be one of the most frustrating parts of email development. It has to look great (or at least look like a button) in every single client, because this little colored block is what all your high-conversions dreams are resting on. I built this button to use for our in-house mailings, and I thought I’d share it here.
This button accomplishes a few things. It includes spacers to help you control how much space appears before and after the button. It’s also built so that the entire colored area of the button is clickable/touchable, not just the text. One advantage this button has, being code-based instead of image-based, is that it’s always visible, even when image blocking is turned on. There are two versions of this button included, one centered and one left aligned.
Here is an example of the centered button.
<!-- START CENTERED BUTTON -->
<center>
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tbody>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
<tr>
<td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="https://www.example.com" style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
Get Started!
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<!-- END CENTERED BUTTON -->
In clients that can handle CSS3, the button will be rounded at the corners. The button will be square in Outlook and other clients that don’t support advanced CSS. If you need it to look identical in all clients, then I would suggest removing the “border-radius,” but I consider this to be an example of progressive enhancement. Users with better clients see a slightly better looking button, and other users see a square button.
The left aligned version of the button is below.
<!-- START LEFT BUTTON -->
<table width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
<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="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
<a href="https://www.example.com"
style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
Get Started!
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END LEFT BUTTON -->
This button is pretty straightforward, but I’ll go over a few settings you can tweak to change the size and shape of the button.
Do you know how your email will render in all of the most popular clients? Give our free trial a shot and find out today!
