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

Bex Osborn

Marketing Strategist

18 Oct 2018

Green Call To Action - Bombproof Email HTML/CSS Button 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.

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.

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

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) .

Next a table row with 3 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 cta button html css email exploded 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 cells have the same bgcolor as the whole table.

Then we add the central :

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

surrounding and this central Next is the anchor tag containing the same style tag for the 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:

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

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

The below make sure any tags within an email keeps your formatting - 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 either side of the button text.border: