“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
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.
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 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
Choose a Button Style
Choose a Button Shape
Choose an Alignment
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
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 blue 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.
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
- Font Size
- Font Weight
- Letter Spacing
- Uppercase / Lowercase / Capitalized
- Text Color
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
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
- Sign Up
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
Incentivize the target audience to complete the objective and click the CTA button.
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
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.
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.