Call us  Call us 01733 308198


How to design a call to action button that converts

Call to actionA call to action is an essential component of most web pages as it tells website visitors where to go next and can help you capture their details before they leave the website. It’s the tipping point between people bouncing away from your site or becoming customers.

But how do you design a call to action button that converts? Why is it that some calls to action are much more powerful than others? Why do some get fantastic clickthrough rates and conversions, while others sit unnoticed and unclicked?

The success of your call to action is about bringing together the right design elements – the colour, background, shape, width, position, CSS elements, etc. – with the right wording. The design answers the first question website visitors have, Where should I click? and the copy answers the second question, Why should I click?

It’s all to do with the psychology of the call to action and how we can use our knowledge of this to create a call to action that converts.


People expect a call to action

The positive thing when creating calls to action is that website users expect to see them throughout a website. Anyone who’s spent time online knows that calls to action are widely used and they have experiences of other landing pages, so they know how calls to action work.

People tend to appreciate seeing a call to action button because it gives them a clear path through your website by telling them where to go next. Of course, just because people recognise, like and expect calls to actions doesn’t guarantee they’ll convert to sign-ups or sales. That’s where the design and wording come into play, but at least you know your audience are already primed to act.

Call to Action

Make your call to action button obvious

For a call to action to be successful, it needs to stand out on the page.

The call to action ‘button’ has become a popular design feature because people readily associate a button with the need to push it. Although most call to action buttons tend to be a rectangular shape, research would suggest that rounded buttons and unusual shapes often attract the highest clickthrough rates because they most closely resemble buttons.

As mobile browsing continues to overtake desktop browsing, there’s a growing demand for call to action buttons that look ‘pressable’ and stand out on a smart phone screen. This can be achieved with subtle shading and bevelled edges.

The psychology of colour

One of the most effective ways to make call to action buttons stand out is to make sure they contrast with the background colour. This is usually best achieved by picking the contrasting complementary colour on the opposite side of the colour wheel. One method to see whether this works is to create several buttons in different colours – some might be brighter than others – and to step back from the screen and squint. Which button do you notice?

Another tactic is to make the less important buttons blue – for example, if you’re offering a demo or a free consultation – and the most important button red, i.e. the button where people can actually sign up to or buy your service/product. This draws on colour psychology, which we explored in the last newsletter, because people associate blue with cold and calm, and red with heat and taking action.

Alternatively, you might decide to make your call to action button green because people associate green with ‘go’. Orange tends to perform well in split tests too.

Which colours you choose will depend on the design of your landing page. If your website uses a lot of green, the chances are that a green call to action button will fail to convert, simply because it won’t grab attention.

Call to Action

Design your page with a logical flow

The position of the call to action button on any web page is important. It needs to sit logically within the copy and design so that people are led from the exposition – the heading – through the complication, i.e. the problems they might be facing, to the solution, what they get if they click on the call to action button.

Many websites have a call to action near the top of the page above the fold (i.e. above the point where you need to scroll down to see more) and in the central column. This is to ensure that the call to action is seen, even when people are skim reading. In these cases, there is usually a line of copy above the call to action that explains why they should click on the button.

It isn’t just the position of your call to action that matters but also the space around it. If your call to action is crowded by other design elements, the chances are that it will get lost in the noise.

Size matters (within reason)

Your call to action button needs to be big enough to stand out on the page but not so big that it overwhelms the rest of the design. As your website needs to be mobile-friendly, it’s important that your call to action buttons are big enough to click easily from a smart phone or tablet.

The only way to be sure whether your call to action buttons are the right size is to split test them against a smaller or larger button with the same design. This will enable you to see which has the best conversion rate.

Call to Action

The call to action copy

It’s easy to lose sight of the call to action copy or to think that, as long as the design of the call to action button is good, it will get clicked no matter what. In fact, the copy you use in your call to action is crucial and probably the only element on screen apart from the headline that you can assume most people will read.

Split tests have shown that just changing one word in a call to action from ‘Start your free 30-day trial’ to ‘Start my free 30-day trial’ can increase conversions by as much as 90%.

Successful calls to actions tend to be those that ignite curiosity and promise satisfaction. Words like ‘ultimate guide’, ‘secrets’, ‘hints’ and ‘tips’ all appeal because people like to think that they will be let in on the secrets to someone else’s success. Inviting people into a ‘private’ group or letting them in on the ‘top mistakes’ people make and how to avoid them can all create the sense that clicking the call to action will bring the website visitor into a select group or inner circle.

Ultimately, you have to give people a reason to click on the call to action. Let them know how they will benefit or what they will receive.

Split testing your call to action

Unfortunately, there is no one-size-fits-all, conversion-guaranteed call to action button. What works best will depend on the design and content of each web page.

We always advise our customers to split test their calls to action, changing one element at a time, to establish what will lead to the best conversions.

If possible, have a call to action on every page of your website, whether it’s inviting people to book a free consultation, subscribe to your newsletter, set up a new account or buy a product. When someone clicks on a call to action and gives you their email address, they become a warm lead who is open to hearing from your business again rather than an anonymous statistic, a person who visited your website and then went about their day.

Are you struggling to create a call to action that converts? Give Grafixbiz a call on 01733 308 198 or email You may even find that some subtle changes can make a big difference to your conversions.


How to design a call to action button that converts was last modified: by
Post Tagged with

Leave a Reply

Your email address will not be published. Required fields are marked *