How to Make HTML Email Buttons That Rock
The purpose of many emailed marketing messages is to encourage the recipient to visit a landing page or some other website. So the design of the call-to-action link is obviously pretty important, yet many marketers bury the link in a block of text or code it so thats its invisible until the use manually loads images.
A great call to action requires a button that:
- Works everywhere. Compatible with every email client.
- Doesnt rely on images being loaded by the client
- Is easy to understand and customizable (fonts, colors, etc.)
Heres the code:
<table cellspacing="0" cellpadding="0">
<tr>
<td align="center" width="300" height="40" bgcolor=" #e0002b " style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
<a href=" http://www.EXAMPLE.com/ " style="font-size:16px; font-weight: bold; font-family: Helvetica, Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block"><span style="color: #FFFFFF"> Awesome Email Button </span></a>
</td>
</tr>
</table>
UPDATE 1: Click here to see additional code to add better Outlook support
UPDATE 2: Moved color declaration inside <span> to fix font color on Outlook Web App aka Office 365
Im using a table to build the structure of the button since that offers maximum compatibility and then using CSS to make the link big and tall so that the whole button is clickable.
Note that if you want to change the height of the button, you must change it in two places (the height on the <td> and the line-height style on the <a> ). If you want the button centered, simply add align="center" to the <table> tag.
Caveats: In some difficult clients like recent versions of Outlook on Windows, the buttons dont have rounded corners and only the text in the button is clickable. See below for a workaround .
This button should work with the following email clients:
- GMail, Yahoo (no rounded corners), Hotmail, and Outlook.com
- iPhone, iPad, Apple Mail
- Outlook 2000 through Outlook 2013 (even when forwarded)
- Android 2.3+ mail client
- Gmail mobile app
- Windows Phone 7
- Lotus Notes 8+
- BlackBerry 5+
- AOL Mail
- Outlook Web App / Office 365 (no rounded corners and only text is clickable)
UPDATE:Improving rendering in Outlook
As I noted above, this table works as a button in Outlook, but there's no rounded corners and only the center text is clickable. But, there's a fix! The trick relies on Outlook Conditional Comments , which let you target some HTML to Outlook, and hide other HTML from it entirely. Click here for the code .
Note that if you want to change almost anything about this buttoncolor, font size, width, button text, linkyou need to change it in at least 2 places. Don't forget to change the Outlook version in the comments. Those comments matter.
Screenshots
Here are some screenshots of how it looks in a couple of different clients (from Litmus and EmailOnAcid email testing services):
New Outlook 2013 button:
Eli Dickinson is Co-Founder and CTO of Industry Dive. Follow him on Twitter at @esd .
Check out Marketing Dive and sign up for our free newsletter full of news and information for marketing professionals.
Want to reach executives and decision makers with your own marketing message? Check out our list of industries .
