Use CSS for email buttons, not images

cssbuttonblogpostIf you had to pare your email message down to two items, what would those two items be?

I’d pick the subject line and the call to action, aka the email button. The whole point of the email is to get your reader to take action. You want them to click through to your landing page, where most of the selling, educating, or entertaining will happen.

The most fundamental purpose of an email is to get the click.

But if your reader can’t see your call to action, they can’t click.

The Blocked Call to Action

If your call to action button is an image, then your reader may never see the call to action. At best, they’ll see a lonely, unadorned text link that looks more like an html error than a call to action.

Why won’t they see your call to action? Because if the call to action is in a button, and that button is an image, your reader may not see the image. Why? Because most email clients are set to automatically block images. Even if someone’s email client is set to show images, only half of consumers keep the images in their emails turned on.

No image, no call to action.

No click, no sale.

No good.

Skip the images. Use CSS email buttons.

Fortunately there is a really easy fix for this: Make CSS buttons.

If your designer gives you a cold look when you ask for this, or if you design your emails yourself and just thought “how in the world do I make a CSS button?”, fear not. There are several great free button makers available. They’ll even make your new email button as an image, too, and you can use the identical looking image button on the landing page.

Whoops – that was a free conversion tip.

CSS Button Makers

My favorite button maker is DaButtonFactory.com. It makes a beautiful button (the button above was made by DaButtonFactory), and you can have your button as an image or in CSS. The controls are fluid and logical and it gives you lots of adjustment options.

The only downside is that it only puts the copy on one line, not two. But if you have some coding skills, I bet you could fiddle with the code and get your text on two lines.

Another good, free button maker is at CSSButtonGenerator.com. It’s a little older and a little buggier, but it has everything you need to make a lovely email button.

Buttons Matter

If you think having just a text link is good enough, consider this: Testing pros know that the three most powerful things to test are headlines and images (“hero shots”) and… buttons. Buttons are very powerful. It is worth your time to obsess about how that button looks.

Give the button at least half as much attention as the headline, though the headline (subject line in this case) remains the most important part of any message, whether that’s an email, a landing page, or even an old-style printed ad.

Oh, and just so us fat-fingered folks on cell phones can easily click the button: Please make it at least 44 pixels wide, and put plenty of white space around it. Thank you.