Web Design

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

Learn how to create an effective call to action button for your website that's clear, concise and enticing to click.

A man pointing his finger at a call to action button on his phone.

“Send Us a Message.”

That was the call to action (CTA) button that I recently saw on a website's homepage. 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 “Contact Us,” my objective (contact someone) would’ve been obvious and I would’ve clearly understood the outcome (someone will follow-up with me).

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

List of typical call to action objectives.

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

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

Square, rounded and pill-shaped buttons

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 of where the CTA is positioned — 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
Read my post Where to Place Call to Action Buttons on Your Website to learn the four areas to place call to action buttons on your website.

3. Change the Button Color

Square, rounded and pill-shaped buttons with 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 red buttons for my primary CTAs on Bento Sites because it’s one of my brand colors and because it contrasts well with white backgrounds. My secondary CTAs, however, are black to differentiate them from the 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

Square, rounded and pill-shaped buttons with a unique font and 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 the Call to Action

Square, rounded and pill-shaped buttons with calls 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. Sometimes, however, you might want to use “Free” even though “free” isn’t an action verb. That's ok. It’s a benefit that users understand and immediately connect with.

Typical Action Verbs

  1. Buy
  2. Call
  3. Contact
  4. Earn
  5. Get
  6. Learn
  7. Join
  8. Order
  9. Reserve
  10. See
  11. Shop
  12. Sign Up
  13. Start
  14. Try
  15. Visit
  16. Watch


Now that you’ve chosen an action verb, add one or two words that entices the target market to click. Brevity is paramount.


Use language that evokes emotion and that audiences can connect with like “Get Rewarded” 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
  • Get Your Free Gift
  • Get My Free Dessert


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 Drink
  • Build Your Pizza in Seconds
  • Instant Access


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

  • Sign Up Today
  • Reserve Now

Persuasive Words

Incentivize the target audience to complete the objective and click the CTA button.

  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 more help with CTAs, read my post 8 Calls to Action for Your Restaurant Website.

6. Link the CTA Button to a Destination Page

Call to action that's linked to a 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.

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 Place Call to Action Buttons on Your Website.

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

Close-up of Jeff Shibasaki wearing a black hat.

Jeff Shibasaki

I’m an Atlanta web designer that specializes in website design and development on Webflow and Squarespace.

Get exclusive design and marketing tips.