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 that’s it’s invisible until the use manually loads images.
A great call to action requires a button that:
- Works everywhere. Compatible with every email client.
- Doesn’t rely on images being loaded by the client
- Is easy to understand and customizable (fonts, colors, etc.)
|Awesome Email Button|
Here’s the code:
<table cellspacing="0" cellpadding="0">
<td align="center" width="300" height="40" bgcolor="#000091" 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>
UPDATE 2: Moved color declaration inside <span> to fix font color on Outlook Web App aka Office 365
I’m 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
Caveats: In some “difficult” clients like recent versions of Outlook on Windows, the buttons don’t 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 button—color, font size, width, button text, link—you need to change it in at least 2 places. Don't forget to change the Outlook version in the comments. Those comments matter.
Eli Dickinson is Co-Founder and CTO of Industry Dive. Follow him on Twitter at @esd.
Want to reach executives and decision makers with your own marketing message? Check out our list of industries.