Your landing page or blog post may have excellent copy, attractive images, and a well-designed layout. But you won’t make a cent or gain a single email subscriber from it if you’re missing one critical element: a call to action.
Without a compelling call to action, your website or blog visitors won’t know that you want them to subscribe to your email list, buy a product, or schedule a consultation for a service. How do you avoid this? By knowing how to design calls to action that boost sign ups and sales.
Check out these 7 tips for designing effective calls to action.
Need some help writing powerful calls to action your audience can’t resist?
Download my 80 free call-to-action templates for websites, blogs, and social media.
1. Make the button large enough (but not too large)
Having a call to action on your webpage or blog post isn’t enough. You also need to make sure it stands out so that your website and blog visitors don’t miss it even if they’re just scanning your content. What’s one key way to make sure your call to action is visible? Make the button large enough to capture people’s attention.
Your call-to-action button should be large enough that it stands out relative to the other elements on your webpage or blog post, such as text and images. However, there’s also such a thing as making your button too big. If your call-to-action button is too large, it can make your webpage or blog post look unbalanced. But that’s not all, oversized call-to-action buttons can also reduce conversions.
When you design calls to action, you can use the squint test to determine whether your call-to-action buttons are large enough. Just stand back from your computer screen and squint. When squinting, all of the details of your call to action will be blurry, but you should still be able to see general shapes. If your call to action button is still visible when you squint, it’s large enough.
Look at how Blue Apron’s call-to-action button is big enough to get visitors’ attention but not so big that it overwhelms them or looks unbalanced.
2. Choose the right button colour
You can find all sorts of data on what the “best” call-to-action button colour is. For example, some experts say that orange, green, and red buttons perform the best. Others say that when you design calls to action, you should consider the psychological associations your audience has with particular colours. In reality, however, there’s no magic colour that works for every website and blog.
When you’re selecting a colour for your call-to-action buttons, the most important thing to consider is what colour will stand out best on the page. If your webpage or blog post has a blue background, don’t make your call-to-action buttons blue. Instead, when you design calls to action, use a colour that will stand out on the blue background, such as yellow or white. Remember, your website or blog visitors should be able to find your call to action without having to search for it.
See how the yellow button in Amy Porterfield’s call to action is hard to miss.
3. Use contrasting button text
When you design calls to action, you don’t just want your call-to-action buttons to stand out from the rest of the page. The text on your buttons matter, so you also want the text to be visible against the background colour of the button.
Make your button text easy to read by pairing light text with dark button colours and pairing dark text with light button colours. Avoid making your text the same colour as your button or a colour that doesn’t show up well on your button’s background colour (for example, yellow text on a white button).
Related: The 62 best words to use in your call to action + 80 free call-to-action templates
Check out how Jenna Kutcher uses black text on this white call-to-action button.
Need some help writing powerful calls to action your audience can’t resist?
Download my 80 free call-to-action templates for websites, blogs, and social media.
4. Make your button look clickable
This one may seem obvious, but it’s an important tip to follow. If you want your website and blog visitors to click on your call to action, they need to be able to tell that it’s a button they can click on.
When you design calls to action, make sure the button looks like a clickable button. Most call-to-action buttons are rectangular with sharp or rounded corners. If you use buttons like these, most of your visitors will know what they are because they would have seen them on other sites and blogs.
Here are some tips for making your call-to-action button look more clickable:
- Use shadows to give it a 3D effect
- Add shading
- Place a border around it
See how CoSchedule added shadows to this call-to-action button to make it look clickable.
5. Place your call to action in the right spot
When you design calls to action, you need to think about how you’ll arrange elements within them. But that’s not all. You also need to decide where you’ll place your calls to action on your webpage or blog post.
Most experts recommend placing your call to action “above the fold” on a page. This refers to the section of a page that’s visible without having to scroll down. The idea behind placing calls to action above the fold is that visitors will see them even if they don’t scroll down.
However, there’s also data to show that some pages convert better when the call to action is placed below the fold. This is true particularly when visitors need to read some copy or content first to persuade them to take action.
In either case, because we read from top to bottom and from left to right in English, buttons placed at the bottom and to the right of content tend to perform better. Placing your buttons in these locations also allows visitors to read the persuasive copy related to your call to action before encountering the button.
See how Crazy Egg’s call to action is strategically placed to be highly visible to people who land on its website.
6. Create white space around your button
What’s another effective strategy for making buttons stand out when you design calls to action? Placing enough white space around them. White space or negative space is the blank space around an element on a webpage or blog post. It’s essentially any space that isn’t covered by text, images, or buttons.
When you place white space around your call-to-action buttons, you help them stand out more. You also make it easier for people to click on them when they’re viewing your webpage or blog post on a mobile device.
See how the white space around these call-to-action buttons makes them stand out on Melyssa Griffin’s landing page.
7. Eliminate distractions
It can be easy to get carried away when you design calls to action. You may have so many ideas that you want to include in your calls to action that you end up with ones that are packed with facts, images, and links. What’s the problem with this? It can be distracting for your visitors, and it may make them less likely to respond to your call to action.
Make your calls to action more visible by removing unnecessary text, images, and links. If an element draws attention away from your call-to-action button instead of directing attention toward it, it’s got to go.
Sprout Social keeps this call to action free of distractions by including essential elements only.
When you design calls to action, test, test, and test some more
The 7 tips I’ve provided above are best practices for designing effective calls to action. But not every size, colour, and layout works in the same way for every website and blog. That’s why testing different options is an important step when you design calls to action.
Businesses have boosted their conversions rates by 10%, 20%, and even 30% just by changing the colour of their call-to-action button or removing a single word from it. That’s why it’s definitely worth your time to A/B test different designs, colours, layouts, and placements when you design calls to action. Testing is the best way to identify what works for your audience and even specific pages or posts on your website or blog.
Need some help writing powerful calls to action your audience can’t resist?
Download my 80 free call-to-action templates for websites, blogs, and social media.
