How To Design an Effective Call to Action Button for Your Website

Jeff Shibasaki
Sep 10 · 6 min read

Design an effective call to action (CTA) button for your website that’s clear, concise and enticing.

Try Sending us a Message.

That was the call to action (CTA) button I recently saw on a company’s website that made me second-guess clicking.

Try? Will I be sending a message through live chat, contact form or email? What should I say? Is there another way to contact the company?

My goal was unclear. The outcome was also unclear.

If the CTA had been to Contact Us — my goal (contact someone) would’ve been clear and I would’ve understood the outcome (someone will follow-up with me).

An effective CTA convinces users to accomplish a clear goal. An ineffective CTA makes users pause and second-guess clicking.

In this post, I’m going to share how to design an effective call to action button for your website.

Step 1: Decide the User Goal

What goal do you want users to accomplish? Order something? Attend something? Subscribe to something?

Examples

  • Contact someone
  • Reserve something
  • Buy something
  • Learn something
  • Download something
  • Share something
  • Sign up for something

Pro Tip
Include at least one primary CTA on each page of your website and one or more secondary CTAs that leads to supplemental information.

Step 2: Choose a Button Style, Shape and Size

Several solid and ghost buttons that illustrate different button shapes.
Several solid and ghost buttons that illustrate different button shapes.
Common button styles and shapes. Illustration by Jeff Shibasaki / Master Your Website.

Choose a button style and shape that matches your website’s branding. Button styles are solid or ghosted and button shapes are rounded, have rounded corners, are rectangular or have a mixed shape.

You’ll also need to decide button sizes for desktop, tablet and mobile devices. For example, a large button could be 160x60 pixels on desktop and 130x45 pixels on mobile.

Ensure the button has plenty of padding (i.e. the white space around the button) because it makes it easier for users to read and click.

Pro Tip
To differentiate between primary and secondary calls to action, use a solid button for primary CTAs and a ghost button for secondary CTAs.

Step 3: Choose a Button Color

Several solid and ghost buttons that illustrate different button colors.
Several solid and ghost buttons that illustrate different button colors.
Match the button color with your company’s branding. Illustration by Jeff Shibasaki / Master Your Website.

What’s the best color for a CTA button? Blue? Green? Orange? Red? A vibrant gradient? Contrast is key, not color. A black button could be highly effective if the button’s size and surrounding white space made it stand out from the other elements on the page.

Match the button color with your company’s branding. A common technique is to choose a brand color for primary CTAs with a solid button and use that same color with ghost buttons for secondary CTAs. Using a combination of solid and ghost buttons with a brand color helps users distinguish between primary and secondary calls to action.

You’ll also need to decide the button color for hover and pressed states. For example, if using a filled red for the button, you may decide to use a filled white for the hover and a red tint for the pressed state.

Pro Tip
Adobe Color is a great tool for creating uniform colors. Just add the hex codes (e.g. #FF375F) of a brand color to find corresponding colors on the color wheel. To learn more about colors, read about color theory.

Step 4: Choose a Font

Several solid and ghost buttons that illustrate uppercase and lowercase button fonts.
Several solid and ghost buttons that illustrate uppercase and lowercase button fonts.
Use uppercase or capitalized letters. Illustration by Jeff Shibasaki / Master Your Website.

The font, size, weight and letter spacing all need to form an effortless reading experience. Using uppercase letters is a common way to draw attention to the text on the CTA button while others prefer to use capitalized letters. Both are effective. Lowercase is not.

When choosing a text color, use dark text on a light-colored button and light text on a dark-colored button.

Pro Tip
Avoid using script fonts. While they might look beautiful, CTAs needs to be explicitly clear and effortless to read. That’s why sans serif fonts are often used for buttons.

Step 5: Write the Call to Action

Several solid and ghost buttons that illustrate a call to action.
Several solid and ghost buttons that illustrate a call to action.
Start the call to action with an action verb. Illustration by Jeff Shibasaki / Master Your Website.

A call to action starts with an action verb. This is a verb that expresses a physical or mental action that can be done. Also, Free is an acceptable substitute for an action verb because it’s a benefit that users immediately connect with.

Action Verb Examples

  • Buy
  • Call
  • Contact
  • Earn
  • Get
  • Learn
  • Join
  • Order
  • Reserve
  • See
  • Shop
  • Sign Up
  • Start
  • Try
  • Visit
  • Watch

After you’ve selected an action verb, add one or two words that evokes emotion, benefits or the urgency to click.

Emotion

Use language that evokes emotion and that audiences connect with like Get Rewarded or Go Natural.

Alternatively, use emotion that informs visitors that you’re empathetic to their situation or problem by focusing on them. For example, try using You, Your and My.

  • See Why [Company Name]’s Right for You
  • Get Your Free Gift
  • Get My Free Dessert

Benefits

Address customer pain points and objections with benefits that save time, money or reveal how easy it is to get started.

  • Level Up Your Cooking Skills
  • Earn Extra Points
  • Free Appetizer
  • Build Your Pizza in Seconds
  • Get Rewarded
  • Instant Access

Urgency

Create a sense of urgency that’s real or perceived.

  • Sign Up Today
  • Reserve Now

Pro Tip
Reduce, limit or omit articles like a, an and the. Brevity is paramount. For example, instead of Get a Free Drink, use Get Free Drink or just Free Drink.

Step 6: Add Ornaments (optional)

Several solid and ghost buttons that illustrate button ornaments like shadows and directional cues.
Several solid and ghost buttons that illustrate button ornaments like shadows and directional cues.
Enhance the button with a shadow, directional cue and animation to make it more appealing. Illustration by Jeff Shibasaki / Master Your Website.

To make the button more appealing, you may want to add a shadow, directional cue and animation. Ornaments like these, make the CTA more enticing to click and provide user feedback when hovering or clicking.

Pro Tip
Avoid over-animating buttons. The best solution is to use the same animation for all types of buttons. For example, if all primary buttons scale upward when hovered, then all secondary CTAs might scale downward when hovered. Keep it simple.

Step 7: Position the Button

A low-fidelity wireframe with an image, copy and a red CTA button.
A low-fidelity wireframe with an image, copy and a red CTA button.
Ensure the call to action button has enough white space, so it lifts off the page. Illustration by Jeff Shibasaki / Master Your Website.

Decide where to position and align the button. Do you want it to appear only above the fold or at the top, middle and bottom of the page? Do you want it to be in the center? On the left? On the right?

Ensure the button has enough white space surrounding the element. It’s the trampoline for your CTA — lifting the button off the page and into the attention of users.

Tips for Creating White Space

  • Reduce clutter on the page
  • Reduce the number of elements around the button
  • Reduce the number of colors that might conflict with the button

Pro Tip
Place buttons after images and copy. This provides users with a task to complete after they’ve read, watched or scanned the content.

Step 8: Link the Button

A red CTA button linking to a destination page for checking out.
A red CTA button linking to a destination page for checking out.
Don’t forget to link your button to a destination page. Illustration by Jeff Shibasaki / Master Your Website.

Make the button clickable by linking it to a destination page. This is usually a sales page, checkout page or thank you page.

Pro Tip
After linking the button to a destination page, test the button to ensure it’s properly connected.

Final Thoughts

You just learned how to design an effective call to action button for your website. Now that you have a CTA button, you need to know where to put the button. For that, read Where to Put Call to Action Buttons on Your Website.

Master Your Website

Take control of your website and increase conversions.

Sign up for Master Your Website

By Master Your Website

Get the monthly, ad-free newsletter that’s all about taking control of your website and increasing conversions. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Jeff Shibasaki

Written by

Writer. Designer. Problem Solver.

Master Your Website

Take control of your website and increase conversions.

Jeff Shibasaki

Written by

Writer. Designer. Problem Solver.

Master Your Website

Take control of your website and increase conversions.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store