Designing Call-to-Action Buttons: 7 Handy Tips

looking over woman's shoulder at website on laptop

So you’ve got great, shiny website and a product or service to sell, but no one is buying, signing up, or contacting you.

Why?

Your calls-to-action, or CTAs, could be to blame.

First, what is a call-to-action?

Simply put:

Words that urge the reader, listener, or viewer of a sales promotion message to take an immediate action, such as “Write Now,” “Call Now,” or (on Internet) “Click Here.” A retail advertisement or commercial without a call-to-action is considered incomplete and ineffective.

– Business Dictionary

I want you to take special note of the second part of that definition: A retail advertisement or commercial without a call-to-action is considered incomplete or ineffective.

The same can be said of a website that is trying to sell a product or promote a service. If users can’t figure out what your website is compelling them to do, how would they know to do it? Users would visit your page, consume the content, and move on and…

Womp womp.

High bounce rate. No sale. No subscriber. No new contact. Sad face.

crying toby mcguire from spiderman
Toby doesn’t like your high bounce rate, either.

The solution is an effective, well-designed call-to-action. While there are many types of CTAs, for our design purposes we’re going to discuss buttons.

When I say button, I literally mean a button. Despite what some may incorrectly think, buttons are not an old trend in web design and are very much an important part of content marketing. They can be designed in an infinite number of ways to fit any brand or style.

In this post we’re going to talk about some of call-to-action button best practices, including how to choose colors, how to make them interactive for a pleasing user experience (UX), and where to place them. I’ll also touch briefly on using the proper active language with a tone of urgency on the text of the button.

call to action buttons from various websites
Calls-to-action from all over the web.

Choosing the Right Button Color

Now let’s start out designing a button, beginning with one of the most important considerations: the color.

When choosing a color for your call-to-action button, contrast is key. Your users need have the button practically leap off the page, inviting them to take action. Users are expecting to find a call-to-action, so don’t make them hunt for it. The button color can harmonize with your site colors without blending in. To figure out which colors do that, we look at our old friend the color wheel.

artists color wheel showing color names
The artist’s color wheel. Image credit: Addvantage USA

To begin, as a general rule, bright colors are more engaging than dark or pale colors. While black can be used as a call-to-action color, it only works in contrast with bright backgrounds.

On the color wheel, we’re looking for contrast in the form of complementary colors. Complementary colors are colors on opposite sides of the artist’s color wheel. While many branding guides will include approved “accent colors” (which are often complementary colors), yours may not, or you may not have a branding guide at all. So, to determine your complementary colors, look for your primary site/brand color on the color wheel, and then look across from it for its complement. For example, if your primary color is blue, your complementary colors will be in the orange to yellow range.

Red and Green as button colors: Unique Rules

One notable exception to using complementary colors is in the case of red and green. As you can see on the wheel, red and green ARE complementary, however, they should not be used together in most cases. Aside from immediately looking like a Christmas-themed site to many users, particularly in the US, red and green actually have no contrast at all to 8% of males and 0.5-1% of females worldwide with red/green color blindness. Additionally, if you have multiple calls-to-action in more than one color, use red or green and never both. Because of the way the human mind interprets visual data, a choice between red and green actually causes “analysis paralysis” resulting in the user taking no action at all.

comparison showing colors to person with normal vision vs person with red-green color blindness

You may be thinking, “well it’s ok, I’ll just use dark red and light green, or dark green and light red.”

No.

On the visible spectrum, which is slightly different than the artist’s color wheel, red and green are actually closer to each other and not opposite, so they do not really create much contrast.

visible spectrum color wheel
Visible Spectrum. Image credit: Graphic-Design.com

As you can see, even darkening or lightening red and green doesn’t work because, once desaturated, there isn’t actually a lot of contrast between them.

Top: Dark red and light green or dark green and light red. Bottom: Once desaturated, neither combination really works.
Top: Dark red and light green or dark green and light red.
Bottom: Once desaturated, neither combination really works.

In truth, there is A LOT more of information about color theory that gets outside of the scope of this article. But if you’re the type to really dive into a subject, here’s a great article on it.

Suffice it to say that using the artist’s color wheel for complementary colors is a great starting point, just don’t use red with green and vice versa. For complementary colors with red, refer to the visible spectrum and look at cyan or teal. For green, look to magenta or indigo.

Consider your audience and message when choosing colors

Now let’s say you have a website that is primarily in neutral colors; gray, white, black, or some combination thereof. You’re thinking, “Awesome, I can use my favorite color!”

Hold up.

Choosing a color is about more than just contrast.

You also need to consider your site’s message and your target audience to narrow down the choices. Colors convey different messages and emotions in different parts of the world. For example, in the US and many Western cultures, green is the color of nature, safety, and money. Green means GO! However, in Japanese and Hindu cultures, green can also mean jealousy. In South African cultures, it is the color of death.

Even in the same culture, colors can have different meanings.

In the US, green can ALSO mean envy, greed, and illness, depending on the context in which it’s used. Red can be the color for caution, warnings, and anger. Yet red can also be the color for heat, love, and passion. Red is an energetic, active color that tests very well for call-to-action use, but it must be used wisely!

This is why it is important to consider your audience AND your message.

Chart showing different color meanings in different cultures
Image credit: Information is Beautiful

Color consistency is key

Consistency is also important when choosing call-to-action colors. Though you should try to have as few CTAs on a page as possible, you may have instances where it makes sense to have more than one, such as a main CTA in a page header and a secondary one in a sidebar.

In this case, you need to be consistent with your color scheme. You don’t want your buttons to become a rainbow kaleidoscope of colors for the reason mentioned above (analysis paralysis). Given too many choices, the easiest option for the brain is to do nothing.

Choose one color for all CTA buttons, using size to denote importance. Or, slightly lighter or darker shades of the primary color for secondary and tertiary buttons.

Alternatively, you can choose an analogous color from your primary button for your secondary buttons. Analogous colors are colors adjacent to one another on the color wheel.

Different shaded buttons, analogous color buttons
Top: Buttons in the same hue, but different shades.
Bottom: Buttons in analogous colors.

You can visually distinguish buttons that are beside each other by using different shades or opacities or a “ghost button.” A ghost button usually has a white or transparent color, colored text, and a solid colored outline. That way, you can maintain your CTA colors while still denoting which one is less important.

primary button and ghost button
Primary button and ghost button

Let’s continue on and we’ll discuss ways to button-ize those buttons and make them irresistibly clickable.

Making buttons a pleasing user experience with depth and interactivity

As a review: What is the purpose of a call-to-action button?

The purpose of a call-to-action button to urge a user to take action.

Right!

So what does this mean for our buttons?

Well, we’ve brought attention to the buttons with our bright, contrasting colors. Now we have to do three things to make these truly effective as buttons:

  1. Distinguish the button from a just a decorative piece of text
  2. Entice the user to interact with it (click or tap)
  3. Provide them with some visual feedback that their action has had an effect

Step 1 relates to how the button looks with the rest of the site design.

Button hover effects are no longer enough.

Let’s say you have some column headers that look like this:

column header inside a colored box

And CTA buttons that look like this:

box button with teal background

How does the user distinguish which is a button without clicking/tapping haphazardly all over the place?

Traditionally, when using a computer mouse, most users have learned that the cursor change from an arrow to a hand means that an object is “clickable.” So, on the desktop, a simple color rollover to show the “clickability” of a button was often sufficient.

arrow changes to pointer when hovering over a link
Image credit: CSS Tricks

However, now with the ever-increasing popularity of touch screen devices, the hover effect is a thing of the past.

No cursor = no hover.

While you can and should still have a hover effect for desktop users, you also need something for mobile device users. Users tapping all over your site, unable to figure out which boxes are links, are users who are not going to stick around.

The simplest way to show a user that a button is a button is to add depth.

You can create the illusion of depth on a button through the use of shadows and borders. While this used to be done all as images, now it can all be done very easily through a few lines of CSS.

You’re not limited to the same old 50% opaque, lower-right, slightly blurred, black shadow, either (although that’s still a nice effect). Using CSS you can create an unlimited number of different effects, with just the “box-shadow” property, or combined with borders and even pseudo-elements.

Fancy!

buttons with different shadows

You can also create depth inside the button through the use of inset shadows, gradients, and text-shadows. All of this can still be done with, you guessed it, pure CSS!

With the correct combinations, you can create a button that actually looks tactile. Your users will WANT to touch it.

buttons with shadows and gradients that appear touchable

Microinteractions: Give the user feedback that the button does something

Think of the last time you rode in an elevator.

When you press the call button for the elevator, or press the floor button in the elevator, what happens?

elf pressing all the buttons in the elevator

The button lights up!

This immediate feedback that your button press has had an effect is called a “microinteraction.”

In web design, microinteractions are important for creating a sense of reality and fostering a pleasant user experience.

Just as easily as we created depth to our button and hover effects for desktop users, we can also use CSS to give visual feedback to a user when a button is clicked or tapped. This can range from very simple, such as a color change on the “:active” selector of the button, to a 1px shift down of the button, to full-blown animation of the button pressing down. Like with adding depth, the possibilities are endless.

The feedback should also be intuitive. When you press a button in real life, it shifts in one direction (up, down, in, out). Or it lights up. The feedback is immediate and makes sense.

However, subtlety here is key. As with so much in design, less is often more. Again, your audience is also an important consideration. While a silly button that bounces around on tap or click might be suitable for a website geared towards children, it’s probably not a good solution for a website for banking.

Microinteractions are fascinating. Despite having “micro” in the name, they are actually an important part of the user experience. For a more in-depth analysis, check out this article on UX Pin.

Make the button easy to click

How many times have you been browsing a website on your mobile device and the site is not optimized for small screens?

Trying to click those teeny, tiny text links and minuscule buttons is the actual worst, isn’t it?

Buttons should be sized so that they are slightly larger than a fingertip. They should be easy to distinguish from the other buttons around them and easy to press.

What’s the use in having a bright, beautiful button, if it’s so small that a user can’t tap it with an index finger or thumb?

man using mobile device touch screen
Buttons should be at least 48px wide for finger touch on mobile devices.

Don’t be afraid of making buttons big. Buttons need to be at least 48px wide and as tall for finger tap on touch screens. Text needs to be large enough to be legible, usually at least 16px. This includes social media icons as well! Though you could go smaller on a desktop view because the mouse cursor is more accurate, for a primary call-to-action you may even want to go larger than the bare minimum.

 

However, just slapping a gigantic, grotesque, neon behemoth of a button, shouting commands in bold, loud text is not the answer either. If the button and text are so large that they seem obnoxious or threatening, it can have the opposite desired effect.

It should be big enough to draw attention but should NOT overwhelm the rest of the content.

So now our buttons have the perfect colors. They have engaging depth. They provide a microinteraction when touched or clicked. And they are large enough to be legible and easily clicked or tapped.

Now where do we put them?

Optimal Button Placement is just as Important as Color

Having the most attractive, well-designed button in the world doesn’t amount to a hill of beans if you put them in a location where no one will ever see them.

As a general rule of thumb, you want your primary CTA to be “above the fold.”

On a web page, above the fold means at the top part before the user has to scroll down. This will take some testing to determine because it includes mobile devices (with much smaller screens), too!

If you’re using pop-ups, you definitely want to use one of your CTAs there as well.

optinmonster example of cta button in a popup ad
OptinMonster has great pop-up ads, and they include really effective CTA buttons

This is not to say that you can never ever place CTAs below the fold, because that is simply not true.

The notion that users “don’t like to scroll” is a thing of the past.

As the web has evolved, so have we, as users. Especially because of the screen size on our coveted mobile devices, users are now used to scrolling to get the content they need.

So, depending on context, there is no reason you can’t put your primary CTA at the bottom of the page. A lot of factors influence whether or not you should do that, however, including your content and page purpose.

You can also use sight lines and visual cues to “point” to your CTA and move users down through your page.

basecamp homepage showing sight line and arrow visual cue
This image from Basecamp has both a sight line from the speech bubble as well as a visual cue. An arrow, though bold, is still a very effective visual cue to literally point out a CTA.
Nike screen grab showing basketball player sight line to the CTA
This screen from the Nike website has a great sight line going directly to the CTA. Though the CTA color could use a bit more contrast for my tastes.

Secondary CTAs can also go in your sidebar or at the footer of the page (in addition to the primary located above the fold).

For particularly long pages, you can also add CTAs at contextual intervals throughout the page in order to break the content into chunks.

cta floated right in a long blog post
This CTA from Muscle for Life is used to break up the segments of the article

Okay. Final steps.

We’ve got our button. It has contrast, it has depth, it’s interactive, and it’s located in all the right places. So what should it say?

The short answer is: It depends.

Using Active Language in the Call-To-Action Text

Your web page should have a purpose.

That purpose should have been planned out before you got to this point, ideally. The content needs to tell a story that guides to user to accomplishing whatever task the purpose necessitates.

It could be that you want your users to subscribe to your email newsletter or blog. Maybe you want them to buy a certain product. Or you want them to fill out a form for a project inquiry. Whatever it is, this is the action part of the call-to-action.

Convey a sense of urgency.

Use language that make it seem like an utter emergency for the user to click your button. “Buy now,” “Start here,” “Subscribe Today,” are all great examples. Though they may seem “tired,” there is a reason you see them everywhere – because they work!

Note: Emphasis was only added to show the urgency of the word, you don’t actually have to do that. In fact, I wouldn’t.

Don’t beat around the bush.

Tell users the exact action that they’ll be performing by clicking the button. Use simple, direct words such as these:

  • Sign Up
  • Download
  • Try
  • Buy
  • View
  • Get
  • Read

Keep it short and sweet.

When necessary, you can also add a second line of extra information. Only do this when it adds to the user experience, such as elaborating on the terms of a Sign Up button

Be careful of going too overboard with extra information though, clear and concise is the key here. In general, stick to two to five words. Users should be able to read, at a glance, the purpose of the button.

Use the first person.

Rather than “Start your free trial,” use “Start my free trial.” Testing run by Michael Aagaard of Unbounce found that switching CTA buttons to first person instead of second person resulted in a 90% click through rate!

The TL;DR version: Designing CTAs that Boost Conversions

To summarize, let’s put together everything into a nice neat list:

  1. Use contrasting colors to bring attention to the CTA buttons.
  2. Be consistent with color schemes on secondary CTAs, but distinguish less important CTAs from the primary CTA.
  3. Use shadows and borders to create depth and a more “button-like” appearance.
  4. Provide visual feedback through microinteractions (e.g. Hover and press down effects).
  5. Size the button appropriately to be clear, legible, and easy to click/tap.
  6. Place the button above the fold, or use visual cues and sight lines to direct the user to it
  7. Use active language and a sense of urgency to motivate the user to act

Using these 7 tips, you can design awesome, conversion-boosting calls-to-action for your website.

looking over woman's shoulder at website on laptop at call-to-action
She can’t resist this delicious CTA.

Now it’s your turn.

Have you applied the above and changed your buttons? Show me the before and after.

Need some help designing buttons for your site? Shoot me a link.

I want to hear from you! Leave me a comment below and tell me what you think!

Too busy to work on the nitty-gritty of design stuff right now? Tell me all about it, I’m here to help! 

Author: Sarah DaSilva

Sarah DaSilva is the founder and creative guru behind SuperPowered Web. SuperPowered Web provides online marketing and website design to fitness studios and fitness professionals. As a military spouse, Sarah has lived all over the country but currently resides in Honolulu with her family. She is an avid fitness enthusiast and foodie and can often be found lifting weights... or lifting a fork.

6 Comments

  • Great thoughts! I’m having our website designed but giving my input and instructions. I wanted to say “Let’s Chat” to be more informal and relaxed, but it was brought to my attention that those words might mean a ‘live chat’. How can I say “contact us” in a more relaxed fun way?
    Appreciate your input!
    Sandra

    • It depends on what the “contact” action really is. I do agree that the connotation of “chat” will be for a live conversation. My “Let’s Chat” button leads users to a scheduling calendar so they can schedule a live call with me, whereas “Contact” leads users to my contact form that is delivered by email. You could use something like “Get in Touch” to convey action on the part of the user. I would use this sparingly though, perhaps just as a CTA, as the word/phrase “Contact” or “Contact Us” is so ubiquitous to users that people will frequently look for that exact term; so having that available elsewhere in your navigation is important.

Leave a Reply

Your email address will not be published. Required fields are marked *