A Guide to Bulletproof Buttons in Email Design

[ 0 By

As designers and marketers, we all understand the importance of getting people to interact with our campaigns. That’s why the call-to-action, or CTA, is all-important.

I’ve written before about CTAs and their importance in email marketing, but today, I wanted to dive a bit deeper into one method of crafting calls-to-action—the bulletproof button.

Don’t Use Images

Traditionally, email designers have relied on images to craft their CTA buttons. Unfortunately, many email clients block image-loading by default. Subscribers, too, sometimes prefer to view emails with images disabled. In fact, we recently calculated that 43% of all Gmail users view emails with images off.

Losing impact when images are disabled.
Losing impact when images are disabled.

If your CTAs are contained with images, there is a good chance that many subscribers are missing out on your message. Even worse, they aren’t interacting with your campaigns.

Fortunately, there’s a better way to build your CTAs: bulletproof buttons.

Bulletproof Button Approaches

Bulletproof buttons allow you to build buttons with code instead of images. You can reliably swap your GIFs, PNGs and JPEGs for HTML and CSS.

By only using HTML and CSS, the button will display in all email clients even with images off, hence making them “bulletproof.”

What’s more, you can update the content and style of your buttons by simply editing your HTML template. You no longer have to waste time crafting buttons in Photoshop, uploading them to a server, and updating your HTML.

There are a few different ways to code bulletproof buttons. Let’s take a look at four different approaches.

If you’d like to follow along, you can check out the test email we set up illustrating the four approaches here.

1) VML-Based Buttons

The traditional approach to bulletproof buttons was popularized by Stig, a developer at Campaign Monitor. This approach uses styling on the link itself to structure and style the button for most email clients. Structure is supplied via the line-height and width properties. As a fallback for Microsoft Outlook, VML (Vector Markup Language) is used within an Outlook-specific conditional comment.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <div>
        <!--[if mso]>
          <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
            <w:anchorlock/>
            <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
          </v:roundrect>
        <![endif]-->
        <a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>
      </div>
    </td>
  </tr>
</table>
button-vml

The traditional approach has great support for most email clients. Additionally, the entire button itself is clickable. The main drawback to using this method is that it relies on VML, which is a proprietary language for Microsoft’s Office suite of applications. VML is an archaic language, one that most email designers aren’t familiar with. Therefore, creating new bulletproof buttons and maintaining existing email templates using this approach can be time-consuming and frustrating.

In using VML, this bulletproof button method essentially creates two versions of the button. The first uses a conditional comment to target Outlook desktop clients and uses VML markup to style the button.

<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button &rarr;</center>
  </v:roundrect>
<![endif]-->

All other clients then use the standard <a> link directly after the
<!–[if mso]> statement.

<a href="http://buttons.cm" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button &rarr;</a>

Another drawback is that you are forced to declare specific dimensions for the width and height of the button. Changes to the copy of the button then requires manual changes to the dimensions of the button, making the process quite tedious and unscalable.

If you don’t want to learn the ins-and-outs of VML (and honestly, who does?), Campaign Monitor has released a free, online tool for building traditional bulletproof buttons. Buttons.cm makes it easy to craft new CTAs that will look great and work well across most email clients.

2) Padding-Based Buttons

At Litmus, we use several alternate approaches for building bulletproof buttons.

The first uses a simple HTML table for the button. It relies on padding at the table cell level to structure the button, and both HTML attributes and CSS to style the button.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#EB7035" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-padding-based

Without having to rely on VML, we can create lean buttons that still work well across most email clients. More importantly, we can quickly update the message and style of a CTA using code that we’re familiar with—HTML and CSS. This makes creating new emails and updating existing templates a breeze.

The major downfall of this solution is that the entire area of the button is not clickable, only the link within the table cell is. This can lead to friction with subscribers that think they clicked or tapped on a button. And, if there’s one thing we want to avoid in email marketing, it is friction for our subscribers.

3) Border-Based Buttons

Border-based buttons takes a similar approach to the previous method. Using simple HTML and CSS, we can structure and style our calls-to-action. However, instead of relying on padding on the table cell level for structure, we add thick borders to the link itself to build our CTA.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            <a href="http://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background-color: #EB7035; border-top: 12px solid #EB7035; border-bottom: 12px solid #EB7035; border-right: 18px solid #EB7035; border-left: 18px solid #EB7035; display: inline-block;">I am a button &rarr;</a>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-border-based

Note that the link tag is set to be a block-level element and that borders are used to provide our “padding”, ensuring that the entire button is hoverable/clickable, even in older desktop clients. The main drawbacks are that Outlook will reduce the size of the borders by a small amount, background images aren’t supported with this method (since Outlook does not recognize <a> tags as block elements), and it eliminates the ability to add more advanced styling such as extra borders on the exact link element. However, we feel that this is a more than acceptable compromise.

Even with Outlook compressing the buttons and varied support for background images, this approach is fantastic for a few reasons:

  • All of the styling is on the actual link tag. No styling is required (except for advanced styling), which simplifies the code.
  • Only one button is used. No double buttons or confusing VML code needed.
  • You don’t need specific height or width definitions, making buttons highly scalable.

This leads us to the final method of creating bulletproof buttons…

4) Padding + Border-Based Buttons

The padding and border-based buttons combine elements of the previous two approaches.

Essentially, this approach uses the same structure of styling the link with both padding and at least a solid 1px border. Then, a background color is applied to the <td> to fill the entire background of the link. The background color needs to be applied to the <td> instead of the <a> in this instance because Outlook does recognize horizontal padding on the <a> tag (since it does not support such styling for non block-level HTML elements).

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="https://litmus.com" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
button-padding-border

The downside to this method is that it once again separates the styling between a <td> and <a> tag. However, only one button is used, specific dimensions are not required, and background images can be supported with this method.

Horizontal Padding Hack for Outlook

A quick hack that can be used to increase the horizontal “padding” for Outlook is to conditionally add inline non-breaking space(s) on each side of the link.

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

Progressive Enhancement with Media Queries

Using -webkit and -moz targeted media queries, we can progressively enhance the button for newer email clients for any of the methods above.

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }

@-moz-document url-prefix() { /* Insert -moz-targeted CSS here */ }

The -webkit-specific query allows us to selectively target clients in Chrome and Safari, as well as Apple Mail and the iOS Mail app. The -moz-specific query allows us to target Firefox. By targeting these clients we can provide a better button for subscribers, such as adding more advanced styling like borders, gradients, web fonts, hover effects, and more.

progressively-enhanced-button

Support

While we refer to code-based buttons as bulletproof, in reality, nothing in email design is actually bulletproof. Inconsistent rendering engines and lack of standards means that no bulletproof button will render perfectly in every email client. That shouldn’t dissuade you from using bulletproof buttons in your email campaigns, though, as all of the major email clients support the various techniques explained above.

You can check out the full Litmus tests here.

Desktop

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

Apple Mail

check-green check-green check-green check-green

Lotus Notes 8.5

check-X check-X check-X check-X

Outlook 2000-2003

check-green
*
check-green
*
check-green
*
check-green
*

Outlook 2007/2010/2013

check-green
check-green
*
check-green
check-green
*

Outlook 2011 (Mac)

check-green check-green check-green check-green

Thunderbird

check-green check-green check-green check-green

Webmail

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

AOL Mail

check-green check-green check-green check-green

Gmail

check-green check-green check-green check-green

Outlook.com

check-green check-green check-green check-green

Yahoo! Mail

check-green
*
check-green
*
check-green
*
check-green
*

Mobile

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

Android 4.x

check-green check-green check-green check-green

Gmail App

check-green check-green check-green check-green

iOS Mail App

check-green check-green check-green check-green

* Rounded corners do not render. † Buttons are collapsed.

Are your Campaigns Bulletproof?

Regardless of which approach you take, using bulletproof buttons for calls-to-action is vastly superior to relying on images. Even in email clients that block images, you can rest easy knowing that your message will be clear to your audience, increasing the likelihood of them interacting with your emails.

Are you using bulletproof buttons in your campaigns? Test them out in 30+ desktop, webmail and mobile email clients with a free 14-day Litmus trial.



  • Jesse

    Great article, cheers!

  • Mark Robbins

    Great round up of the buttons types.

    I’m gonna get a little bit controversial now…

    Personally I can’t stand buttons that aren’t 100% clickable.

    I’d never condone using an image for a button but at least you can click on them.

    If a button is only 20% clickable, it’s 80% useless. This is a real issue on touch screens where we’re advised to make clickable areas a minimum of 44px, that means a font size of 44px for each button.

    Rant over.

    • Jason Rodriguez

      I think it’s a fair point, for sure. In theory, I agree with you—I prefer buttons that are 100% clickable. I love building buttons for the web, as we can just do everything on the link tag. Fortunately, both the VML-based and border-based buttons are completely clickable.

      In practice, though, I’ve yet to come across a client that has expressed concern over the clickable area of an HTML-based button. Granted, I don’t do client work anymore, but it was never a concern even when I did.

      Text-based buttons work just fine on mobile, as long as you give them ample space and make them a reasonable size (not necessarily 44px). I think most fingers can hit a smaller target as long as it’s not cramped by other text or links. It’s not so much the size of the target as the area surrounding it.

      • Mark Robbins

        As far as I’m aware it’s only really me that has an issue with this, I’ve not heard many people moan about it :)

        I’d like to do some testing at some point to see if I have a valid argument.

        • Jason Rodriguez

          Would love to see the outcome of some testing if you get around to it.

        • Jaina

          I think the general consumer and for average email receiver, they don’t think about the clickability (is that a word?) of a button. Rather, does it look like a button and if it does, can I click on a region of it and it’ll take me somewhere?

          Saying that, I too can’t stand buttons that aren’t entirely clickable. Especially these days when you do have to consider mobile, and having a larger clickable area just makes more sense.

    • Eli Dickinson

      My solution results in 100% clickable buttons on most clients: http://www.industrydive.com/blog/how-to-make-html-email-buttons-that-rock/ It also keeps it’s formatting when a message is forwarded in Outlook (some other variants break badly here)

  • Heidi

    Valid point Mark, but VML-based buttons ARE 100% clickable. I highly recommend trying them for your next send.

    • Mark Robbins

      Oh yeah I’m a big fan of VML buttons, they can be a bit of a pain to get your head around at first (less so with Stig’s code generator) but I love ’em.

  • John Wen

    The workaround code for MS Outlook is not tracked in our DREAM email platform. DREAM tracks a hyperlink using a redirect and it does not recognize the code. It’s probably looking for: a href=” “.

    I’ve found that the button works well in the email clients listed but we are under-reporting clicks from Outlook users. So it looks like we will have to put off using this code until we transition to our new Harmony email platform at the end of the year. We’ll test it then and see if the same thing happens again or it’s resolved.

  • Greg

    Is it possible to use mc:edit on bulletproof buttons so client can edit the text and href?

    • Jason Rodriguez

      You should be able to. I haven’t messed around much with MailChimp’s template language, but I’ve successfully made editable bulletproof buttons using Campaign Monitor’s template language.

      You may need to mess around a bit with where you insert the mc:edit, but it should be possible.

  • GregdodgeSF

    The padding + Border-Based version is not working for me in Outlook Webmail (in Chrome on Mac). Is anyone else having this problem?

    • http://www.bramwillemse.nl/ bramwillemse

      same here!

      • Vellanki Ganesh

        Me too!! padding and margins collapse..:-(

  • Ian Graus

    Hi there, I hope this fix will work for more people.

    I’ve got the padding + border working in Lotus notes 8 and 8.5. The rest of the border radius renders in all clients except the ones marked with the *.

    I’ve removed the border radius on the link tag. The following code rendered correct:

    Redeem your code

  • Ian Graus

    Hi there, I hope this might fix Lotus notes 8 and 8.5 for more people. I’ve removed the border radius on the link tag as such:

    <a href="#" target="_blank" style="font-size: 12px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-align: center; color: #ffffff; text-decoration: none; padding: 12px 18px 12px 18px; border: 1px solid #0089c4; display: inline-block; width:200px;">Redeem your code</a>

  • Kennedi G. Avelino

    How can we make the border based button to be a responsive?

    • http://www.litmus.com Justine, Litmus

      You’d want to apply a class to the table cell containing the button and add instructions to your media query to change the styles—check out Jason’s Salted template for an example of how it can be done: https://github.com/rodriguezcommaj/salted

  • Vellanki Ganesh

    hi why outlook 2013 does not render padding…for buttons!!

    • http://www.litmus.com Justine, Litmus

      Unfortunately, Outlook versions 2007 and newer use Word as a rendering engine and don’t support padding in some contexts :(

  • Andrew

    These buttons are great, but it looks like they break in Outlook 2013 when you forward the email. A lot of stuff shifts when you forward in Outlook, but these buttons have duplicated links making it look atrosis. Oh Microsoft, how I love they.

  • Pingback: (English) Email hacks: 3 online tools to make your life easier()

  • resetplz

    Very sneaky and very helpful, thanks

  • Pingback: Integrating Calls to Action on Higher Education Landing Pages | Education Marketing | Google Analytics | SEO | Higher Education Marketing()

  • Jhoan Beron

    Great help. Just a question regarding VML-based buttons. In my case in need to set dinamically the attributes for my button like href and name. I have my mail template in a xslt template and that along with a xml payload generates my final template with all data populate it. Since vml button definitio its in a comment I can’t set its href attribute. is there any workaround for this ? Thanks