← Customize 200+ templates for your newsletter

Design Inspiration

Top Tips for Best Call-to-Action Button Design

Top Tips for Best Call-to-Action Button Design

A call-to-action is probably the whole reason you send email: you want readers to actually do something. It could be signing up for an event, downloading an ebook, purchasing a product, or sharing your content. Whatever it may be, it’s likely the driving force behind your whole email campaign. So it’s critical that when you actually get readers to act—through a super effective email that has a killer subject line, fabulous copy, and beautiful content—that the CTA really brings it home. Readers need to know where, how, and why to click. Messing up your CTA is like putting a mouth-watering steak in front of readers but failing to give them a fork.

Let’s walk through our top tips for call-to-action button design, to help you create a call-to-action that will get clicks.

Should my CTA be a link or a button?

Call-to-action buttons do just that: they call readers to act, or to do something. Buttons stand out—they’re prominent, take up significant space in an email, and get attention. They stand alone as their own component of an email, so that even if readers 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. (And they should be used sparingly—just one or two per email).

Links are better used to take readers somewhere—to your website, to an article you’ve referenced, to a customer support center—in a way that’s less important, urgent, or specific.

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 likely best presented in a well-designed, stand-out button.

What should the CTA button say?

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

Screen Shot 2015-11-18 at 10.54.17 AM

The button has a friendly tone and it’s clear: click it and you’ll get a free trial. Messages shouldn’t be too short or too long. Three to four words should do it. Think “Download your free ebook” instead of “Click to register for our special ebook deal today.” Here’s a good example from PureWow:

Screen Shot 2015-11-18 at 2.20.07 PM

Good CTAs are customized and unique to reflect the tone of the brand. “Click here,” “Register,” “Learn more,” and “Sign up” are overused and generic. Using personal pronouns like “my” and “your” also helps to set a friendly tone and make a CTA feel engaging and approachable. Charity: water, a non-profit organization bringing clean drinking water to people in developing countries, uses a unique CTA that reflects their brand voice and mission:

Screen Shot 2015-11-18 at 2.06.47 PM

Alternatively, here’s a zippy, on-brand CTA from The Skimm:

Screen Shot 2015-11-18 at 2.27.32 PM

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 here

How have you customized your CTA buttons in unique, effective ways? Let us know in the comments!

How should the CTA button look?

Buttons come in all shapes and sizes, some more effective than others. Here’s what to keep in mind when designing the perfect CTA button:

Make it bulletproof

CTA buttons in email are generally designed one of two ways: with HTML code or with an image. We’ve said it before and we’ll say it again: your buttons should always be written in HTML. Buttons written in HTML—also known as bulletproof buttons—will always render across all inboxes. You can either turn 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, poof, there goes your pretty button. No button, no clicks.

Here’s that same Netflix email again but with image-viewing disabled. Their bulletproof button still shows up:

Screen Shot 2015-11-18 at 3.05.47 PM

In another email from Lord & Taylor, their SHOP SHOES and SHOP HANDBAG buttons look great with images on…

Screen Shot 2015-11-18 at 3.14.14 PM

…but check out how they evaporate when we aren’t viewing images:

Screen Shot 2015-11-18 at 3.14.42 PM

Go Goldilocks on the size

The size of your CTA button should be “just right”—not too big and not too small.

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 General Assembly’s CTA button is the full width of the email, but it doesn’t feel overwhelming because it’s balanced nicely by the image (both are the same width) and it appears further down in the email without any competing design elements around it.

Screen Shot 2015-11-18 at 3.24.41 PM

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.

Screen Shot 2015-11-18 at 3.29.23 PM

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 Patagonia email:

patagonia

Color is crucial

Color is a key way to make your button stand out. Most brands choose a brand color that’s in line 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 TasteBook uses the same bright green color of its logo for buttons:

Screen Shot 2015-11-19 at 8.56.38 PM

 

Against a white background and in contrast to the black/gray text around it, the green really pops. The white type may not be ideal for readability, however. Other brands rely on a button’s border for definition, like this example from Warby Parker:

Screen Shot 2015-11-19 at 9.26.50 PM

Generally, buttons with borders don’t also have a filler color (i.e., white email background and white button background). Those with a background color and a border tend look inelegant and outdated—a far cry from the flat design style that’s currently on-trend. Same goes for color gradients. Better to keep it simple. Here’s another use of border from the online shop Huckberry:

Screen Shot 2015-11-19 at 9.11.16 PM

 

Shape the edges

From a design perspective, rectangular elements generally connote a sense of traditionalism, practicality, and balance, while more 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 in this example from Everlane:

Everlane use

And here’s how Casper, a mattress company, softens the edges of its button to match the shape of the mattress pictured:

Screen Shot 2015-11-19 at 9.08.31 PM

Where should the CTA button be placed?

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—then invite them to act.

Your call-to-action button design checklist

There are as many button styles out there as there are emails. Take note of how brands you admire are doing it, and test the effectiveness of different button styles to see what works best with your audience. Have fun with it! And remember these rules of thumb for call-to-action button design:

  • Write action-oriented, personal, compelling, and unique copy for your button
  • Keep copy direct and clear, making sure readers know exactly why they’re clicking
  • Make sure you’re button is bulletproof (written in HTML so it always renders)
  • Check that your button visually pops out and can be easily and quickly found
  • Consider your visual brand identity and the style of your email when choosing a button’s color and shape
  • Use a color that contrasts from the background of your email (and copy color that contrasts from the button color)
  • Keep the style simple: choose on color for either the background color or the border + copy color
  • Place your button in an easy-to-find spot that fits organically in the story of your email (probably below the fold)

Don’t forget that if you build your CTA button in the BEE email editor, it will always be bulletproof and totally customizable (color, shape, size, border, padding). Give it a try!

Our Reader Score:

Total: 0 - Average: 0

Kelly Shetron

Tags: