Forget bulletproof HTML/CSS email buttons – make them bombproof!

A bombproof button that works on everything, even lotus notes…

I’ve been coding at ActionRocket now for almost 6 months and one thing I have learnt is one size does not fit all. We have a solid bit of code for coding call to action buttons, but the whole button wasn’t clickable. We have all been down the route of all image buttons – whilst this is still a viable option for complicated buttons or if a brand is so strong it can’t cope with Outlook changing the font and losing rounded corners…

So I got the task to create a button that could be used everywhere, that could also fit easily into WYSIWYG editors and ESP’s such as those under the Salesforce umbrella, plus smaller business esps like Mailchimp and Campaign Monitor.

Want to go straight to the final code – Find it here.

CSS

All the styles are inline, but placing the below set of classes in a media query which is set at the max-width for these buttons to work on mobile.

The first class – .wrapto100pc – This ensures on mobile the element extends to 100% width. In this case the width of the td/tab.

<style type="text/css">
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
.wrapto100pc {
width: 100%!important;
height: auto!important;
}
}
</style>

Followed by a class to hide content on mobile – .nomob – to makes sure the elements are not shown on a screen below 600px in this case.

<style type="text/css">
@media screen and (max-device-width: 600px), screen and (max-width: 600px) {
.wrapto100pc {	
width: 100%!important;	
height: auto!important;
}
.nomob {
	display: none!important;
	width: 0px!important;
	height: 0px!important;
}
}
</style>

Lastly, to ensure on gmail app on ios the button extends to 100% width.

<style type="text/css">
@supports (-webkit-overflow-scrolling:touch) and (color:#ffff) {
div > u ~ div .gmailbutton { 
width: 100%!important;
}     
}	
</style>

HTML

Firstly a table:

Background colour bgcolor (this can be left blank for a transparent button). border-radius for curved edges on desktop/mobile. Unfortunately border-radius is not supported in Outlook or Lotus Notes – so the button will be square, but to get rounded corners in Outlook you can add some VML (Blog post coming soon) .

<table bgcolor="#84B818" border="0" cellpadding="0" cellspacing="0" class="wrapto100pc" style="border-radius: 8px;">               
<tr>     
<td>
</td>
</tr>
</table>

Next a table row <tr> with 3 <td> cells – the two outer cells are both the same. They disappear on mobile class=”nomob” but are needed on desktop to keep the padding and space for rounded buttons.

Exploded Button

Setting the top and bottom corners radius respectively keeps the rounded edges. The width is only 8px to keep the spacing, but this area actually isn’t clickable – but not obvious whilst on desktop. These edge <td> cells have the same bgcolor as the whole table.

<table bgcolor="#84B818" border="0" cellpadding="0" cellspacing="0" class="wrapto100pc" style="border-radius: 8px;">               
<tr>
 <td bgcolor="#84B818" class="nomob" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;" width="8"></td>   

<td></td>

<td bgcolor="#84B818" class="nomob" style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;" width="8">                </td></tr></table>

Then we add the central <td>: align=”center” to keep the button in the middle, bgcolor to match the table, the two classes for mobile wrapto100pc and gmailbutton. The next section is to style the text – so match this to whichever brand guidelines you are using:

style=”font-size: 16px; line-height:20px; font-family: helvetica, arial, sans-serif, ‘Montserrat’; color: #ffffff; text-decoration: none;

Followed by:

vertical-align: middle; – Keeps the words vertically aligned central.

height:44px; – The height of the button which can be changed to suit.

border-radius: 8px; – The same Border radius throughout the <table> surrounding <td> and this central <td>

Next is the anchor tag <a> containing the same style tag for the <td> above, to ensure it is styled correctly throughout all email clients.

Within this section I have included text-decoration: none; – you can customise a link with the usual html properties: none, underline, overline, strikethrough.

To make sure the link appears as you want on Windows 10 (not blue and underlined) include the below in the head of your email:

<!--[if (mso)|(mso 16)]>
<style type="text/css">
body, table, td, a, span { font-family: Helvetica, Arial, sans-serif!important; }
a {text-decoration: none;}
</style>
<![endif]-->

To make sure your link displays correctly across apple devices include the below in the head of your email:

<style type=”text/css”>
a[x-apple-data-detectors] {
	color: inherit!important;
	text-decoration: none!important;
	font-size: inherit!important;
	font-family: inherit!important;
	font-weight: inherit!important;
	line-height: inherit!important;
}
</style>

The below ensures Microsoft office, webkit and microsoft (Internet Explorer/Edge) doesn’t mess with the text size in <a> tags:

<style type="text/css">
* {
	mso-line-height-rule: exactly;
}
* {
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

</style>

Lastly – similar to the style class above to ensure gmail on iOS expands the button to 100%. The below make sure any <a> tags within an email keeps your formatting –

<style type="text/css">
u + #body a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
	line-height: inherit;
}
</style>

The padding is set to 10px top and bottom – this can be edited according to the height you would like the button. 30px left and right gives a good clickable size margin on either side of the text that is within the anchor tag. This is not respected on Outlook – so to keep the padding around the text and make the whole area clickable we included

<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->

either side of the button text.

border: 1px solid #84B818; border-radius: 8px; display: block;

The above ensures the button looks correct across clients colour wise and with the correct border. display:block ensures the anchor tag area is clickable on more clients.

target=”_blank” – This is to ensure when a user clicks a link it is opened in a new tab, there is some debate as to whether this is needed within email, so include if you want, your guidelines say so or if you want to ensure on older browsers the link opens a new tab/window.

Final HTML

<table bgcolor="#84B818" border="0" cellpadding="0" cellspacing="0" class="wrapto100pc" style="border-radius: 8px;">               
<tr>
 <td bgcolor="#84B818" class="nomob" style="border-top-left-radius: 8px; border-bottom-left-radius: 8px;" width="8"></td> 
<td align="center" bgcolor="#84B818" class="wrapto100pc gmailbutton" style="font-size: 16px; line-height:20px; font-family: helvetica, arial, sans-serif, 'Montserrat'; color: #ffffff; text-decoration: none; vertical-align: middle; height:44px; border-radius: 8px;"><a href="http://www.actionrocket.co/" style="font-size: 16px; line-height:20px; font-family: helvetica, arial, sans-serif, 'Montserrat'; color: #ffffff; text-decoration: none; text-transform: uppercase; vertical-align: middle; letter-spacing: 1px; padding: 10px 30px; border: 1px solid #84B818; border-radius: 8px; display: block;" target="_blank">

<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]--><span>CALL TO ACTION</span><!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->

</a></td>                   
<td bgcolor="#84B818" class="nomob" style="border-top-right-radius: 8px; border-bottom-right-radius: 8px;" width="8">                </td></tr></table>

Everything together on Codepen

Jay Oram – @emailjay_
Coder @ Action Rocket