Calls to action! As website owners, we all know how important they are to our websites, email marketing, and other marketing campaigns, but writing and designing an effective call to action can be daunting and confusing.
This post will review some general call to action best practices, what to add or include in your call to action design improve click through rate (CTR), and some call to action examples and templates.
Call to Action Best Practices
Let’s start by going over some call to action best practices.
One Page, One CTA
For each web page—homepage, about page, testimonials page, services page, etcetera—you should have one primary call to action. That is it.
Why?
People get overwhelmed or confused when asked to do too much, and overwhelmed, confused people don’t take action of any kind, even if it’s for something free.
Make it as simple as possible for someone to understand what the next step is and TAKE IT.
Define the purpose of your page first. When planning the content for any page or post, you should always do this step regardless as part of your content marketing strategy. Once you know the purpose of the page, this should help you define your call to action for that page.
If you struggle to narrow down your calls to action to just one, prioritize what you want people to do by asking:
- What is the number one thing I want my website visitors to do on this page? (Make this CTA the biggest and most obvious.)
- If they’re not ready to do that yet, what is the next best option? (Make this CTA a hyperlink in the page copy.)
Meet People Where They Are
Don’t overthink things. You do not need a unique CTA for every single page on your site.
You just need a CTA that supports your goal for that page and advances people to the next step in the conversion funnel.
Here’s a quick breakdown of how a conversion marketing funnel works (read more on our lead generation page).

All this means is that you need to choose the best call to action for where your visitors are in their journey.
If they are on a sales landing page for example, they are poised to buy something from you and just need a little more convincing.
If they are on a blog post, they are looking for more information on a topic. They are typically not yet ready to buy, but are ready to join an email list.
You Only Need Two CTAs for Your Whole Website (At Least to Start)
If you’re like most website owners, your website will have two main goals: one tied to making sales and one tied to building an email list to make sales later.
Start by figuring out the two main CTAs that you will use throughout your site—one for revenue pages and one for education pages.
- Revenue pages – One call to action to hire you or buy your product
- Education pages – A primary call to action to join your email list and secondary calls to action to visit your revenue-focused pages.
Now that you understand these basics, let’s jump into some design elements that make for an effective CTA.
Use These 15 Call to Action Design Elements to Boost Conversions
I want to note that call to action design is about more than visual aesthetics. It’s also about emotions, feelings, and copy. Everything should come together to form a cohesive and compelling design.
1. An Incentive / Freebie
Everyone loves a freebie, just make sure it’s helpful, actionable, and relates to a challenge that your audience has, or it won’t be much of an incentive.
Some examples of free incentives include:
- ebook or another download
- preliminary consult
- access to a membership area, gated content, or community
- white paper or case study
- risk-free trial
- coupon code
- bonus product or BOGO
- training session
- contest entry
- trade-in/trade-up program
- loyalty/rewards program
- email or video series
- exclusive sneak peak, webinar, or other invitation
When applicable, include an image of your incentive/freebie in your CTA design to make it more tangible, like in the example below.
2. The Right Colors
Different colors evoke different emotions. You can spend all day (and then some) researching color theory and color psychology if that’s what you’re into, but that’s not what I am suggesting here.
Simply take the basics of color psychology into account.
The Color Red
In a marketing context, red is typically used to indicate urgency. It’s also more eye-catching than any other color.
Red actually “[e]nhances human metabolism, increases respiration rate, and raises blood pressure.” No wonder it evokes a sense of danger and urgency!
Test out red on your sales landing page CTAs to see if this simple switch boosts your conversion rate. For businesses with multiple pricing options or tiers, use a pricing table with a red button/highlights to draw attention to the option you want people to choose, like in the below example.
The Color Green
Green on the other hand, “[s]lows human metabolism and produces a calming effect.”
Green may work better on static product pages or for other types of CTAs such as email sign ups or contact CTAs.
Use Brand Colors to Create a Cohesive CTA Design
Use your brand colors or complimentary colors when designing your CTAs. You want everything on your site to look cohesive (this goes for fonts as well). (Although, it’s okay to branch out and try a bolder color for testing’s sake.)
Use a contrasting color scheme in your CTA design. Typically a good combo is a neutral background color and a different high-contrast button color that captures attention and can’t be missed.
We talk more about color in web design in our post on How to Design a Blog.

New to website building?
Get More Website Planning Support
If you’re like most people, when you decided to DIY your website, you dove head-first into the technical details. The problem is creating your dream website doesn’t start with a template or technology. It starts with proper planning. Get started planning an amazing website with this free webinar!
Website Planning:
Practical Steps for
Planning a Website
If you want to keep going with your website planning, check out our free on-demand webinar
3. White Space
White space is your friend! This is a tried and true design principle that never fails. A crammed CTA with too much going on hurts your user experience.
With the Gutenberg Block editor you can add padding to columns, groups, and cover blocks, or add spacer blocks so your CTA design is more user-friendly and engaging.
4. Accurate Language on Your Button
Your call to action button needs to accurately describe what will happen when someone clicks. Don’t leave any room for doubt or confusion. If it says “Buy Now”, then the person should be completing a purchase transaction.
Here are some examples of specific actions and the action-oriented language you might use:
- Add to Cart – adds item to cart (could also redirect to the cart so they can see it was added)
- Shop Now – redirects user to your ecommerce shop or landing page
- Download Guide – downloads guide or similar item
- Take Me to Checkout – redirects user to checkout page
- Learn More About [Topic] – redirects user to a page with more info or jumps to a section of the same page with more info
- Watch Demo – redirects user to a page with video, jumps to video, or plays the video
- Start Your Free Trial – basically like a “buy” button but you probably want some micro-copy here as most free trials require a credit card number (more on this in #6); may also mean redirecting to a page (such as cart, checkout, or confirmation page) that visually shows what the person is getting and the start and/or end date of the trial
- Put Me On the List – adds user to an email list, wait list, or other list (also show and/or email a confirmation message)
- Send Me the Checklist – sends the user the checklist or similar item to their email
5. First-Person
Did you notice that several of the examples in the above section use the first person? That’s on purpose.
Use first person pronouns like “I” and “me” in your CTA buttons/text links to create a sense of inclusion. The first person POV makes people feel like the message is directed specifically at them, making them more engaged and willing to complete the desired action.
6. Microcopy
Microcopy is snippets of copy that guide, inform, or reassure potential customers. On CTAs, microcopy is usually located above or below a button or form, but it can be anywhere. Button text, form labels, placeholders, confirmations and other messages are all forms of microcopy.
Here’s are some examples of microcopy:
- We will never share or spam your email.
- No hidden costs or fees.
- No credit card required. (Or if it is required be sure to say it will not be charge until the free trial has ended.)
- You’re almost there!
- Thanks! We got your message and will reach out to you in 1-2 business days.
- Enter a detailed description of your issue here.
Microcopy can increase user confidence, reduce friction, increase conversions, and even build your brand reputation (by injecting some personality).
7. An Image (or Video)
Include a relevant image in your CTA to help bring your products to life and increase trust. Product images are great if you have them. Show context—the product in use—for an even bigger impact. For example, if you sell t-shirts, don’t just show the shirt, but an image of someone wearing it. If you sell paintings, show an image of a painting on a wall in a living room.
Stock images can also work if what you are selling is more abstract. In this case, choose an image that evokes positive emotions or depicts a person in the situation you’re describing. If the stock image can be edited and modified (based on its licensing agreement), then you can also create a branded version.
Below is a simple CTA with an image that you can easily customize with your own image.
You could even use CTAs with video, like in the example below! Consumers are 85 percent more likely to buy a product after viewing a product video.
Another idea is to leverage photos/video of real customers. This includes:
- social media photos/videos of customers or brand ambassadors holding or using your products
- photo of customers accompanied by their testimonial
- video testimonials
Encourage your customers to submit photos and testimonials so you have more of these types of content to work with. Testimonials and UGC (user-generated content) can also be very effective facebook ads, widening your reach even further.
8. An Attention Grabbing Headline
The headline is one of the most important (if not the most important) parts of your CTA. Make sure it grabs the user’s attention.
No, that doesn’t mean SCREAMING IN ALL CAPS. While that probably would get someone’s attention, it’s also obnoxious and a one-way ticket to spam city or a page bounce.
A good call to action headline is concise. Good copywriting isn’t flowery, overblown language; it’s simple, direct, and clear.
It also speaks to the your audience’s needs or pain points. More on that below…
9. Action Words
Make your CTA copy actionable by using action phrases/words in your headline, body copy, and button text.
It should sound like you are instructing your visitors exactly what to do next.
If there is no action, then there’s no conversion. If it’s both actionable and shows the benefits of doing the action, this is the best of both worlds.
10. Emotion Words
Humans make decisions based on emotions, then use facts and logic to justify those decisions. Appeal to your audience’s emotions by emphasizing how they will feel after they buy, download, learn about, read, do, etc.
Positive emotions get people excited about taking action. Negative ones—leaning into your audience’s struggles—gets them motivated because they want to feel better or different.
11. Personalization
I mentioned this toward the beginning of this post, but it bears repeating.
You may have the best written and designed CTA in the world, but if you are showing it to the wrong people, it makes no difference. Show the right CTA’s in the right places to increase their converting power.
Understand your target audience and their needs, wants, and problems. If they are browsing your products, you can hit them with the hard sell. If they are reading a blog post, ask them if they want to join your email list for more tips on whatever topic they’re checking out.
12. A Benefit / Solution
What would your CTA be without mentioning the benefits or solution your offer holds? Tell people what they stand to gain, and be specific. How much time will your solution save them? How will their life change or look different? Address a particular sales objection and eliminate it.
13. A Sense of Urgency
Invoke FOMO! This may not always apply, however, if you are promoting a limited time offer of some kind, make sure to stress the urgency. (As mentioned earlier, color can also help with this.)
Tell people when the offer is valid until and to make sure they know to act now or miss out.
14. A Photo of You
If you are asking someone to contact you, schedule a consultation, or anything else where a 1:1 interaction with you is involved, putting a face to a name goes a long way to making people feel more comfortable.
You can add other subtle clickable icons or elements under your image as well—to connect on LinkedIn or by email, or even a phone number—as long as they don’t overpower your button. Below is an example.
15. Sometimes You Need to Subtract, Not Add
It’s not always about what you can add to your CTA, but sometimes what you can subtract. Be precise and get rid of the fluff.
Keep your colors, images, and other design elements simple. Everything should serve a purpose.
Sometimes a minimal CTA—like the below example—is best.
Closing Thoughts
Here are some key action items from this post:
- Define the primary CTA for each page on your website.
- To start, create two CTAs that you’ll use throughout your site. One for revenue pages (buy now or hire you) and one for education pages (sign up for email list).
- Use a relevant incentive to draw people in.
- Use your brand colors (or complimentary colors) in your CTA design. Make sure your button contrasts and stands out.
- Make your CTA visually appealing with white space (group blocks/padding and spacer blocks).
- Describe exactly what to expect with accurate button text.
- Use first person pronouns to create a sense of inclusion.
- Use microcopy smartly to guide, inform, and reassure.
- Add an image or video to increase engagement.
- Grab attention with a concise, clear headline.
- Guide and put users in control with action words/phrases.
- Reinforce the perceived outcome with emotion words.
- Use personalization (i.e. show the right CTAs in the right places to increase conversion).
- Present the benefit/solution to make your offer appealing.
- Harness a sense of urgency for limited time offers/deals.
- Include a photo in contact CTAs to build trust and confidence.
- Subtract as needed. Every element in your CTA should serve a purpose.
Remember, your CTAs do not have to be perfect. The goal is to get something out there that is good enough, following the call to action design best practices and ideas outlined in this post.
I do recommend consistently revisiting your CTAs, checking their performance, tweaking, and split testing or a/b testing as needed. This allows you to hone in on the finer details of the design and copy until you create the absolute best CTA iteration.
Launch Your Website Quickly
Mai Theme provides everything you need to build a website: the best blocks, patterns, layouts, and website templates.
Launch or re-launch your website quickly with a starter site for the website template you choose to use. Everything just works together flawlessly, because it was all built as part of a cohesive system!
Check out our video on how to create a great website in 15 minutes to see how easy it is. (FYI Mai Design Pack is now Mai Pro Pack.)
Download the How to Start Blogging Guide
Explore this FREE GUIDE to take a deep dive into how to start blogging to make money. Get a PDF version of this guide right to your email, plus weekly tips from our blogging experts at BizBudding.
