How To Create an Effective Call To Action Button on Your Website

 
 create-effective-website-cta-button

“Send Us a Message.”

That was the call to action (CTA) button that I recently saw on a website’s sales page. What should I write? What did the business need to know? What specifics were essential?

I wasn’t sure. The objective was unclear.

If the CTA had prompted me to “Get a Free Quote,” my objective (get something) would’ve been obvious and I would’ve clearly understood the outcome (receive something).

An effective CTA clearly and concisely induces website visitors to accomplish an objective and click. An ineffective CTA makes website visitors second-guess clicking, ask questions and, consequently, reduces conversion rates.

Without an effective CTA –– the website copy, images, video and on-page optimization is all going to suffer. Visitors must be prompted to take action with a clear, concise call to action button.

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

1. Decide the CTA’s Objective

 cta-objective-list

What’s the most important objective that visitors should accomplish? Book something? Contact someone? Sign up for something? If the CTA’s objective is unclear to you, it’ll surely be unclear to visitors.

Typical CTA Objectives

  • Book Something

  • Buy Something

  • Contact Someone

  • Download Something

  • Get Something

  • Sign Up for Something

  • Try Something

Pro Tip
Ensure your website’s homepage and sales pages have a primary CTA that leads to a sale. Also, ensure that each page has one or more secondary CTAs that offers supplemental information or lead magnets — both of which lead to a sale.

2. Add a CTA Button

 add-cta-button

CTA buttons are square, rounded or pill-shaped and can have a solid, raised or outline background. The size of the button will ultimately depend on whether the CTA is above or below the fold, but regardless where the CTA is positioned — ample white space is critical.

White space is like a trampoline for CTAs. It lifts them off the page and into the attention of potential customers. Don’t underestimate the importance of white space.

Create White Space

  • Reduce clutter on the page

  • Reduce the number of elements around the CTA button

  • Reduce the number of colors that might conflict with the CTA button

Choose a Button Size

  • Small

  • Medium

  • Large

Choose a Button Style

  • Solid

  • Raised

  • Outline

Choose a Button Shape

  • Square

  • Rounded

  • Pill

Choose an Alignment

  • Right

  • Left

  • Center

Pro Tip
Design all of your CTA buttons at once to save time. Start by adding small, medium and large buttons to an unpublished page and then style the fonts and colors. Learn about the Squarespace button block.

3. Change the Button Color

 change-cta-button-color

What’s the best color for a CTA button? Blue? Green? Orange? Red? Contrast is key, not color. A site that uses a black button could be effective as long as the button size and amount of white space effectively draws attention to the call to action.

Still, the color of the CTA button must match a site’s branding and contrast well against the page’s background color. For example, I use a green button for my primary CTAs on Bento Sites because green is one of my brand’s colors and because it contrasts well with a white background. My secondary CTAs, however, are black to differentiate them from my primary CTAs.

Typical CTA Button Colors

  • Black

  • Blue

  • Green

  • Orange

  • Red

Pro Tip
Learn about color theory to choose the right color for your CTA button or to improve your branding.



4. Change the Button’s Font and Text Color

 change-cta-button-font-text-color

The ideal font, size, weight and letter spacing should be legible and match the site’s branding and prevent the user from squinting and zooming. 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.

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

Choose a Font

  • Font

  • Font Size

  • Font Weight

  • Letter Spacing

  • Uppercase / Lowercase / Capitalized

  • Text Color

Pro Tip
Avoid using script fonts for CTA buttons. While they might look beautiful, a CTA needs to be explicitly clear and effortless to read. A sans serif font is best for a CTA button.

5. Write a Call to Action

 how-to-write-a-call-to-action

A call to action starts with an action verb. This is a verb that expresses a physical or mental action that can be done. However, in my example above (see image), I used “Free Download” even though “free” isn’t an action verb. “Free” is the exception for starting without an action verb. It’s a benefit that visitors understand and immediately connect with.

Typical Action Verbs

  1. Build

  2. Buy

  3. Call

  4. Create

  5. Discover

  6. Earn

  7. Get

  8. Go

  9. Join

  10. Order

  11. Reserve

  12. Schedule

  13. See

  14. Shop

  15. Sign

  16. Start

  17. Try

  18. Watch

Brevity

Now that you’ve chosen an action verb, add 1 to 5 more relevant words that entices the target audience to click. Brevity is paramount.

Emotion

Use language that evokes emotion and that audiences can connect with like “Start Looking Confident” or “Go Natural.”

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

  • See Why [Company Name]’s Right for You

  • Start Your Free Trial

  • Get My Free Sample

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

  • Start with a $25 Gift Certificate

  • Begin My Free 30-Day Trial

  • Get a Free Quote

  • Build Your Pizza in Seconds

  • Instant Access

Urgency

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

  • Sign Up to Save Today

  • Buy Now

Examples of Persuasive Words

All of the above examples employ just a couple of persuasive words that incentivize the target audience to complete the objective and click the CTA button. Try using the following persuasive words to get started:

  1. Bonus

  2. Easy

  3. Fast

  4. Free

  5. Instant

  6. My

  7. New

  8. Now

  9. Quick

  10. Today

  11. Trial

  12. You

  13. Your

Pro Tip
Reduce, limit or omit articles like “a,” “an” and “the.” For example, instead of “Watch the Video” use “Watch Video.” For a list of 200 CTA examples, read my post 10 Essential Calls to Action for Your Website With CTA Examples.

6. Link the CTA Button to a Destination Page

 link-cta-button-to-destination-page

Now that you’ve decided the CTA’s objective, added a button and written an effective call to action, it’s time to 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 CTA button to a destination page, test the button. Visitors aren’t going to stick around on pages with broken links. Also, periodically check the links on each page to ensure they haven’t broken. Use Ahrefs or Check My Links (Chrome extension).

Wrap Up

You just learned how to create an effective call to action button on your website. Now that you have your CTA button, you need to know where to position it on your website. For that, read my post — Where to Put Call to Action Buttons on Your Website.

Now, go master your website.

How To Create an Effective Call To Action Button on Your Website first appeared on the Bento Sites Blog by Jeff Shibasaki.