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.

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 →