The Ultimate 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 critical.

We’ve written before about CTAs and their importance in email marketing and in this blog post, we’ll dive a bit deeper into one method of crafting calls-to-action—the bulletproof button.

Don’t Use Images

Because of image-blocking, image-based CTAs are not advised and aren’t used by most email marketers.

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

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

Using image-based CTA buttons also impacts the accessibility of your email. If you’re hiding the context of the CTA inside an image, screen readers may not be able to read them, making your email inaccessible for visually impaired subscribers.

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

bulletproof buttons in email design

Make every campaign bulletproof

With Litmus Checklist you can test your calls-to-action so that your subscribers aren’t missing out on interacting with your email. Plus, instantly see how your campaigns look in popular email clients and devices.

Start a Checklist →

 

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.

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, Vector Markup Language (VML) 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

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 <![endif]–> 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>

VML Based Button Pros and Cons

Pros:

  • Great support in most email clients (see table below).
  • The entire button itself is clickable.

Cons:

    • Relies on the use of an unfamiliar language—VML—a proprietary language for Microsoft’s Office suite of applications, which makes creating new bulletproof buttons and updating existing ones time-consuming and frustrating.
    • Width and height of the bulletproof button must be declared, so any change to the copy of the CTA would require changes to the dimensions of the button.

If you don’t want to learn the ins-and-outs of VML (and honestly, who does?), Campaign Monitor has 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

This method 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; 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

Padding-Based Button Pros and Cons

Pros:

      • Works well across most email clients (see table below).
      • Uses code email designers are familiar with—HTML and CSS, which makes the creation of new bulletproof buttons and updating existing ones a breeze.

Cons:

      • The entire button is not clickable, which can lead to friction with subscribers that think they clicked or tapped a button.

3. Border-Based Buttons

Border-based buttons take 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; 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 and clickable, even in older desktop clients.

Border-Based Button Pros and Cons

Pros:

      • All of the styling is on the actual link tag, 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.

Cons:

      • Outlook reduces the size of the borders by a small amount.
      • Outlook does not recognize <a> tags as block-level elements.
      • No ability to add more advanced styling such as extra borders on the exact link element.

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 not 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="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; text-decoration: none;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

Padding + Border Based Button Pros and Cons

Pros:

      • Only one button needs to be coded, which makes buttons using this technique easy to update.
      • Specific dimensions for the buttons are not required.
      • Background images can be supported with this method.

Cons:

      • Styling is separated between a <td> and <a>, so both need to be updated when there are changes in style for the button.

Hacks and Enhancements

Each of the above methods are great starting points in creating bulletproof buttons but each technique can be further modified to create better bulletproof buttons.

Horizontal Padding Hack for Outlook

Outlook doesn’t support horizontal padding, which can result in your CTA text being very close to the left and right edges of your bulletproof button. 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

To improve the design of your bulletproof button you can use 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 support across clients 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 11

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

IBM Notes 9

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

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

Outlook 2016 (Mac)

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

Outlook 2016 (Windows 7)

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

Thunderbird 52

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

Mobile

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

Android 4.4

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

Gmail app (Android 6.0)

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

Gmail app (iOS 10)

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

Gmail IMAP (Android 4.4)

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

Inbox by Gmail (Android 6.0)

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

Inbox by Gmail (iOS 10)

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

iOS Mail App

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

Outlook (Android 6.0)

check-X check-green check-X check-X

Webmail

VML Buttons

Padding Buttons

Border Buttons

Padding + Border

AOL Mail

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

Comcast

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

Freenet.de

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

G Suite

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

G Suite

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

GMX.de

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

Inbox by Gmail

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

Libero

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

Mail.ru

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

Office365

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

Orange.fr

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

Outlook.com

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

SFR.fr

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

T-online.de

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

Web.de

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

Yahoo! Mail

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

* Rounded corners do not render. † Buttons are collapsed.
**Text from the VML CTA appears above the non-VML button.

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, bulletproof buttons ensure that your message will be clear to your audience, increasing the likelihood of your subscribers interacting with your emails.

What’s your favorite bulletproof button technique?

Share how you create bulletproof buttons in your emails with the Litmus Community.

Join the conversation →