SexyButton – A Responsive, Universal, HTML Email Button

coding / css / email / html / mobile / responsive   Posted on Apr 10, 2013 by Darin Senneff

Running an email marketing campaign is something that virtually anyone in the advertising, design, or development industry has encountered at some point or another. Let's face it — email marketing is an extremely effective way of sending a message (whether that is a commercial, political, or other) to a large number of people. Just a couple of years ago, US firms alone spent over $1.5 billion on email marketing. However you slice it, it's a powerful marketing tool, so knowing the nuances and tricks to stash in your utility belt for a rainy day will make your campaigns all the more effective.

The tip I'm going to discuss today is how to create that element which is a part of any good marketer's email newsletter: the call-to-action button. Think of all of the newsletters and email blasts that you receive. I'll bet that there's a button of some sort in there. And chances are that said button is prompting you to do something — visit a website, purchase an item, slam your head against the keyboard, etc. That's the purpose of a call-to-action button, to direct your viewer to complete the action you'd like them to do. The best ones will persuade and even command the user to act without thinking. Kind of like The Force

SexyButton

The problem with HTML emails is that they are God-awful to code, as every email client, browser, and provider will render your code differently, causing your elements to look slightly to drastically different across users, much to the frustration of any design or developer. That includes your pretty call-to-action button. You may think you've pulled off a coding miracle only to find out that your button doesn't show up for Hotmail in Chrome or Outlook 2003 on Windows XP. Anyone that's ever coded an HTML email knows exactly the frustration I'm talking about. 

As is the case with creating a web page in HTML to view in your browser, with HTML emails there's countless ways to built an element or accomplish a task. And since HTML email development still forces us geeks to use disgusting tags like <table>, that means there are countless options for a coder to create an element like a button. Unfortunately, most of these fail in one way or another once they are tested across various clients and platforms. And now that you add mobile devices into the mix, the chance of running into a problem is extremely high. 

But now you can send that email stress-free by incorporating SexyButton into your document. SexyButton is a universal call-to-action button that functions and looks great in every client and provider I could test it in. BUT WAIT, THERE'S MORE!!! SexyButton is also responsive, so it will look great whether the user views your email on their laptop or smartphone. 

What's so great about SexyButton?

  • SexyButton is built using all markup. Only HTML and CSS allowed to this party. 
  • No images are used. A common way to add a button to your email is to design one in Photoshop, then export it an a .jpg or .gif and add it to your document with an <img> tag. But the problem with that is 1) most email clients block images initially, forcing the user to click a button to load and view the images. This decreases the effectiveness of your call-to-action when you make the user jump through a hoop to see it. And 2) images have a set width and height. If you want to have your email look great on a user's smartphone, the image may not always fit, so it will get distorted or scaled down and lose its legibility and esthetic. 
  • SexyButton is easy to edit. If you want to change the text, size, color, or other property of the button, you can easily do it in the code.
  • Graceful degradation. SexyButton looks, dare I say: 'Sexy,' in the latest browsers. You can add rounded corners, gradient backgrounds, drop shadows, etc. But what if your user is viewing the email on an older version of Outlook that doesn't support one of the CSS features? SexyButton still looks good and effective in those cases by dropping back to standard, failsafe styling. 

Code

To start, you'll need to paste this HTML code into the content area of your document's <body>. The markup of the SexyButton is an old-fashioned table with two rows and one cell in each row.

 

<!-- BEGIN SEXYBUTTON -->
<table class="button">
	<tr>
		<td align="center" width="auto" bgcolor="#8a2829" style="padding-top: 14px; padding-right: 80px; padding-bottom: 14px; padding-left: 80px; background: #8a2829; background: -moz-linear-gradient(top,  #a64849 0%, #8a2829 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a64849), color-stop(100%,#8a2829)); background: -webkit-linear-gradient(top,  #a64849 0%,#8a2829 100%); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; color: #fff; border: solid 1px #5b1b1c; font-size: 18px; font-weight: normal; text-decoration: none; display: block;" class="buttonTop">
			<a href="#" style="color: #FFF; text-decoration: none; font-family: Helvetica, Arial, sans-serif; vertical-align: baseline;">Click Here &rsaquo;</a>
		</td>
	</tr>
	<tr>
		<td width="auto" style="display: block; font-size: 16px;" class="buttonBottom">&nbsp;</td>
	</tr>
</table>
<!-- END SEXYBUTTON -->

 

So what's happening here? We're creating a table with two <tr> rows, and one <td> cell in each row. Essentially, a 2x1 table. We're starting off by giving the table a class named of "button" which we'll use later. The first <tr> contains only a <td> cell which has some inline styling added to it. What is happening is that this <td> is going to be the button that you are seeing rendered oncreen. We're starting off by setting the <td>'s display property to block, rather than the default inline. After that, we're adjusting the cosmetic aspects of the button such as the padding, background, border, and other properties. 

After that, you'll see that there's an <a> anchor tag inside of the <td>. This link is going to be the clickable area of our button. The inline styling here assigns the font, color, and removes the default link underline. Also in there is the line "vertical-align: baseline," which prevents an odd alignment bug in some clients. 

Now, you already have a nice-looking button that will look and function fairly great across many clients and browsers. However, there's still some more that needs to be done. Let's move to that second <tr> row. The <td> cell in that second row has some inline styles added to it. What we're doing is setting the <td>'s display property to block and setting the font-size to a value that we want. And then instead of adding text to the <td> we are simply entering a non-breaking space. But what is all of this for? Well, because some email providers won't recognize bottom margins of elements that have padding applied to them (like our first <td> above), if we were to place an object below our button, there wouldn't be space between them in certain clients. But by using the bottom row of this table as a faux bottom margin, we're able to consistently keep whatever space we want underneath our button by setting the font-size property of our bottom row. We're essentially setting the size of the non-breaking space to whatever we would want our bottom margin to be.

Testing that out, we have a sweet and sexy button that looks good in all of the main email clients and browsers. But what happens if a user views our email on their smartphone? Well, that's where our responsiveness comes in. I could go into extreme detail on responsive design and coding (and I'm planning on releasing an entire responsive email template in the future), but in this case I'm just going to cover the bare essentials that are relevant to our SexyButton. 

In the <style> section of the <head> of your document, we're going to place the following CSS media query:

@media only screen and (max-width: 480px),
	only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
		table[class="button"] {width: 100% !important;}
		table[class="button"] td[class="buttonTop"] {padding: 0 !important; font-size: 1.3em !important; }
		table[class="button"] td[class="buttonTop"] a {padding: 1em 0 1em 0 !important; display: block !important; }
		table[class="button"] td[class="buttonBottom"] {font-size: 1.4em !important; display: block !important; }
	}

 

A media query is a portion of CSS code that tells your browser (or other device viewing the document) to interpret the following styles if a certain condition has been met. In this case, we're checking for the width of the screen to drop below 480 pixels (most smartphones). You can write that media query above a little more efficiently and perhaps in a much more correct way on a web page, but I've found that this particular way works consistently for emails.

Inside of our media query, we're referencing our table and setting it to be 100% width. You most likely will have the SexyButton inside of several layers of containers, so the table will fluidly expand to whatever room its parent container allows it to. Next, we're referencing the top cell of the table and taking out the padding and setting our mobile font size. The reason we're setting the padding to 0 is because in the next line, we're setting the padding of our <a> link.

Now why do we set the padding of the <td> on desktops but set the padding of the <a> on mobiles? This is one of the few drawbacks about SexyButton. In testing, I found that setting the padding of the <a> on desktops resulted in inconsistencies that were not present when setting the padding to the <td>. However, that inconsistency is not present on the smartphones I tested on, so giving the <a> the padding results in the whole area of the button being clickable rather than just the text, while on the desktop, only the button's text is clickable. In a perfect world, the entire desktop button would be clickable, but I'll gladly take this minor quirk in exchange for consistency. 

Finally, we're setting the size of our space below the button by adjusting the font-size of the bottom cell in the table. One thing you'll also notice is that all of my CSS values have the keyword "!important" after it. I noticed that sometimes, the smartphone will use the desktop inline styles unless you force the override with the "!important" keyword. This way, we can ensure that our smartphone is using all of the properties we've set in our media query.

Now that I've walked through the relevant code for our SexyButton, let's see how it looks. I've plopped the code for SexyButton into a generic email template and tested it out below.

Outlook 2002:

Outlook 2011:

Outlook 2011

Yahoo! Mail in IE:

Yahoo! Mail in IE

Gmail in Firefox:

iPhone 4s:

Android 4.0:

Android 4.0

As you can see, SexyButton looks pretty darn good across a variety of clients and platforms. For those times when our gradient backgrounds, rounded corners, and drop shadows don't appear, the button is still visible, retains its size, retains the spacing around it, and looks clean. Those are completely appropriate degradations that work perfectly in these cases. Let us know if you try it out, happy coding!

Search the Blog

Blueprint Tweets

Cordcutting explodes as the rate of change accelerates https://t.co/ym7teZgebM #cordcutter

Thursday May 25, 2017

Fun Infographic: 50% of Gen Z ‘Can’t Live w/o YouTube’ & Other Stats https://t.co/R98RiHslpX #digitalmarketing

Tuesday May 23, 2017

RT @kyledcheney: Rep. @justinamash has officially become the 2nd Republican cosponsor (199th overall) on a bill creating an independent com…

Saturday May 13, 2017

Visit BlueprintTweets ›

Contact Us

202.681.0215

info@blueprintinteractive.com

1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

Or submit your info and let us know what we can do for you!