Email Development September 24, 2015 • Kyle Lapaglia

The Last Bulletproof Button You’ll Ever Need

Buttons can be one of the most frustrating parts of email development. It has to look great (or at least look like a button) in every single client, because this little colored block is what all your high-conversions dreams are resting on. I built this button to use for our in-house mailings, and I thought I'd share it here.

The Button!

This button accomplishes a few things. It includes spacers to help you control how much space appears before and after the button. It's also built so that the entire colored area of the button is clickable/touchable, not just the text. One advantage this button has, being code-based instead of image-based, is that it's always visible, even when image blocking is turned on. There are two versions of this button included, one centered and one left aligned. Here is an example of the centered button.

<!-- START CENTERED BUTTON -->
<center>
  <table width="100%">
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <table border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto;">
          <tbody>
          <tr>
            <td align="center">
              <table border="0" cellpadding="0" cellspacing="0" style="margin:0 auto;">
                <tr>
                  <td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                    <a href="http://www.example.com" style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
                      Get Started!
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</center>
<!-- END CENTERED BUTTON -->

In clients that can handle CSS3, the button will be rounded at the corners. The button will be square in Outlook and other clients that don't support advanced CSS. If you need it to look identical in all clients, then I would suggest removing the "border-radius," but I consider this to be an example of progressive enhancement. Users with better clients see a slightly better looking button, and other users see a square button. The left aligned version of the button is below.

<!-- START LEFT BUTTON -->
  <table width="100%">
    <tr>
      <td>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <table border="0" align="left" cellpadding="0" cellspacing="0">
          <tbody>
          <tr>
            <td align="left">
              <table border="0" cellpadding="0" cellspacing="0" width="150">
                <tr>
                  <td align="center" bgcolor="#87be45" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                    <a href="http://www.example.com" 
                    style="padding: 10px;width:150px;display: block;text-decoration: none;border:0;text-align: center;font-weight: bold;font-size: 15px;font-family: sans-serif;color: #ffffff;background: #87be45;border: 1px solid #87be45;-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;line-height:17px;" class="button_link">
                    Get Started!
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
<!-- END LEFT BUTTON -->

Making Changes

This button is pretty straightforward, but I'll go over a few settings you can tweak to change the size and shape of the button.

To change this to a right aligned button, just change align="left" to align="right" in both places that it appears.
You can edit the spacing above and below the button by changing the line-height, height, and font-size of the TDs in the tables above and below the button.
To change the width of the button, make sure to edit both the width attribute on the TD and the style on the hyperlink.
To change the height of the button, you can edit either the line-height style or the padding style on the hyperlink.
You can control how rounded the corners are through the trio of "border-radius" styles on the hyperlink.
The color of the button can be controlled through the bgcolor attribute on the TD and the background-color style on the hyperlink. Make sure to use a 6 digit hex code, as Outlook doesn't like 3 digit shorthand codes.
Finally, text size and color can be controlled through the font-size and color styles on the hyperlink.