Top Tips for Best Call to Action Button Design

Choose a call to action button or link

Both links and buttons have benefits when it comes to CTAs. Links are better used to take readers somewhere — like your website, an article you've referenced or a customer support center. Compared to buttons, links are often less important, urgent and specific.Call to action buttons get your reader to act. Buttons stand out — they take up significant space in an email, helping them get attention. They stand alone as their own component of an email. Even if readers just skim or skip your body copy, they'll still notice that big, bright, shiny button. Buttons are used for the primary action you want readers to take.If your email is well-focused with a key objective or purpose (like getting webinar signups or increasing product sales), the action that will lead to that result is best presented in a well-designed, standout button.

Craft strong call to action button text

Good call to action button design will showcase the email's value proposition in a way that's clear, specific and concise — so readers understand exactly what they're getting by clicking. Here's a good example from Wilton Icing:

The button makes it clear what will happen if you click — you'll be able to view a guide. The text on your CTA button shouldn't be too short or too long. Three to four words is a good rule of thumb. Think "Download your free ebook" instead of "Click to register for our special ebook deal today." Here's a good example from Lunya:

Good CTAs are customized, unique, and they reflect the tone of the brand. "Click here," "Register," "Learn more" and "Sign up" are overused and generic; stay away from those if you can. Instead, use personal pronouns like “my” and “your” to set a friendly tone and make a CTA engaging and approachable. Charity:water, a nonprofit bringing clean drinking water to people in developing countries, uses a unique CTA that reflects their brand voice and mission:

Here are some others to try:

• Reserve my spot
• Redeem my coupon now
• Get my free ticket
• Pre-order yours
• Claim your seat
• Get the full scoop

Now that we’ve covered what your email marketing call to action should say, let’s talk about what it should look like.

Tips for call to action button design

Buttons come in all shapes and sizes — some more effective than others. Here's what you need to keep in mind when designing the perfect CTA button.

Remember to make it bulletproof

CTA buttons in email are generally designed one of two ways: with HTML code or with an image. Your buttons should always be written in HTML. Buttons written in HTML — also known as bulletproof buttons — will render across all inboxes, ensuring that all of your customers can see them. You can either make a standard CTA button bulletproof by adding a few lines of HTML code or check that the email editor that you’re using generates bulletproof buttons (and that those buttons are not simply images).The problem with image buttons is that you have much less control of how the image looks across devices (and if it will show up at all). For subscribers who have images disabled, your button won’t show up at all. And no button means no clicks.Here's the Wilton Icing email we looked at above, but with image-viewing disabled. Their bulletproof button still shows up:

In another email from Lord & Taylor, their "Shop shoes" and "Shop handbag" buttons look great with images on...

...but check out how those same buttons evaporate when we aren't viewing images:

Avoid this kind of situation by making sure your CTA buttons are completely bulletproof.

Pick your call to action button size

How big should your CTA button be? You might be tempted to go big to make it visible — but bigger isn’t always better. Readers shouldn't feel like you’re shoving a demand in their faces. Strike a balance by making your button wide if it’s not too tall, or by making it a little taller if it’s not too wide.Check out how REI’s CTA button appears in this email. It feels balanced, with the width of the image, the width of the text and the width of the button creating an inverted triangle effect.

Alternatively, this one from the Getty Museum is a bit over-the-top. The height of the button is in balance with the header (the word "SHOP" is quite tall), but having two lines of text for the button makes it unwieldy, and with a quick scan, it's hard to tell if the button is a button at all.

It's also important to remember that readers on mobile devices or tablets should be able to easily tap a button with a fingertip, so best practice is to allow ample white space around your button. Here's an example of effective use of whitespace in a message from Melissa & Doug:

Including whitespace makes it easy for people to tap.

Choose the best call to action button color

Color is a key way to make your button stand out. Most brands choose a button color that's on-brand and lines up with the design of the email. Often, the button echoes the header design in color (if not also in width or tone). Here's how Zoe’s Kitchen uses the same bright orange color of its logo for an email call to action button:

Other brands rely on a button's border for definition, like this example from Partake Cookies:

Keep things simple with your color gradients. The best choice is often an on-brand background color or border that helps your CTA button stand out in a good way.

Decide on a shape

From a design perspective, rectangular elements generally connote a sense of traditionalism, practicality and balance. Circular elements can be perceived as soft and calming. Like color, the shape of your button should align with your brand style as well as the design of your email. An email with square and rectangular images or design elements would probably do better with a button that mirrors that style, like this example from The North Face:

And here's how Quip, a toothbrush company, softens the edges of its button to match the circles pictured in the product photo above:

These are a few call to action button best practices that can help your button be as effective as possible.

Consider your call to action button placement

Many of the emails in this post follow the best practice of communicating a clear, single message that leads to a clear, single call to action. Research has shown that placing a CTA button below the fold actually increases clicks by 304%! The important thing is to let readers know what they’re signing up for first — with great copy and visuals — and then invite them to act.We’re also seeing a lot of emails in our inbox with multiple CTA buttons. Many of these emails, like the example from Lucky Brand below, have their main CTA halfway through the email. Then they list several specific products, adding a separate CTA button for each one.

If you’re sending browse or cart abandonment emails, it can be helpful to give customers a specific CTA button for each product they’ve previously considered.

Your call to action button design checklist 

There are as many button styles out there as there are emails. Take note of how the brands you admire are designing their CTAs and test the effectiveness of different button styles to see what works best with your audience. Remember these rules of thumb for your call to action button design:

• Write action-oriented, compelling and unique copy for your button
• Keep the copy direct and clear, making sure readers know exactly why they're clicking
• Make sure your button is bulletproof (written in HTML so it always renders)
• Check that your button "pops" (stands out visually)
• Consider your visual brand identity and the style of your email when choosing a button's color and shape
• Place your button in an easy-to-find spot that fits organically in the story of your email (probably below the fold)

Wrap-up: Create an email call to action with BEE 

If you build your CTA button in theBEE email editor, your button will always be bulletproof and totally customizable (color, shape, size, border, padding and more). Give the free BEE editor a try as you create strong call to action buttons for your brand!

Share this post with your friends! Pin it on Pinterest ?