How To Create an Effective Call To Action Button on Your Website
“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
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
Sign Up for Something
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
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
Choose a Button Style
Choose a Button Shape
Choose an Alignment
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
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 an Eastern Blue button color for my primary CTAs on Bento Sites because it’s one of my brand colors and because it contrasts well with a white background. My secondary CTAs, however, are black or white to differentiate them from my primary CTAs.
Typical CTA Button Colors
Learn about color theory to choose the right color for your CTA button or to improve your branding.
You might also like these posts:
4. Change the Button’s 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
Uppercase / Lowercase / Capitalized
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
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
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.
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
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
Create a sense of urgency that’s real or perceived.
Sign Up to Save Today
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:
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
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.
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).
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.
How To Create an Effective Call To Action Button on Your Website first appeared on the Bento Sites Blog by Jeff Shibasaki.