7 Effective Tips to Design Website CTA Buttons

Call-to-action (CTA) buttons are pivotal for websites. They compel website visitors to take the next step after landing on your site. Whether you want a visitor to subscribe to your newsletter, download a PDF, book a service or add a product to their cart, the CTA is the “digital nudge”.

That being said, designing your website CTA buttons must also be taken seriously and executed strategically. Our website design and development experts have successfully built hundreds of websites that drive traffic and conversions through well-crafted CTA buttons.?

Our experts spill the beans on best practices below.

Tip #1 | Experiment with the right colour for CTA buttons.?

Time to go back to the colour wheel on this one.?

Our eyes will always get distracted by pattern disruptors. We can easily see a white spot on a black background. Scientifically, it’s the Von Restorff effect.

And that’s the idea you must think about when deciding what colours your CTA buttons will be. It must capture your site visitors’ attention right away.?

Can’t decide? This colour wheel infographic will give you some ideas.?

As you can see, contrasting colours from the wheel are ideal. If your website’s dominant colours are dark, a bright-coloured CTA button can easily be seen. Our very own website perfectly shows this example, pairing up a completely black website theme with CTA buttons in bright pink colours - just works.

If your website bears more than one feature colour, the triadic wheel can guide you towards the best CTA button colours to align with your branding.

Another thing to keep in mind is colour psychology. As you know, some colours denote different meanings. Red symbolises strength, orange exudes happiness, blue means peace, green connects with nature, and so on.?

For example, if your brand focuses on eco-friendly products, you might as well try green for CTA buttons, especially if your main website colours are white or light shades of brown.

Tip #2 | Make them act with action words.

Intent and action to take – those two important things to note when writing your CTA buttons. The user must already know what prompt it wants them to do, and what the intent of the button is.?

Check this example from one of our website clients Vodafone Business Centre Melbourne. The CTA button clearly tells someone to book an appointment with them and by clicking this button, it leads the prospect to the booking page.?

Use active voice and verbs in your CTA buttons. This can clearly reflect what action you want them to take. ‘Download Now’, ‘Buy Now’, ‘Subscribe Now’, and similar examples can be effective ones to try out. Also, emphasise the time value – your CTA button shall also tell them they need to act now or miss out.?

But the thing with CTA buttons like that is they can be too generic already. Trying out longer, more specific CTAs like ‘See how we can help design your websites’ or its variations are also worth trying.?

Tip #3 | Make CTA buttons that stand out.?

Colours alone can’t save your CTA buttons from being unnoticed. Its size and placement can also contribute to its visibility.?

Take a look at these CTAs from Just Honk Used Cars website we also designed.?

Aside from following the rule of colours, the visibility and placements of CTAs are top-notch. They are at the homepage banner and can easily be accessed by site visitors. It allows them to access car buying locations, car trading options, and search car body types – all in one place.

Tip #4 | Connect with your visitors through personalised CTAs.?

Oftentimes, CTA buttons end up unclicked because it seems commanding – ‘Read More’ might be off-putting especially if you don’t feel like reading something at the moment.?

A better approach? CTA buttons with personalised messaging, just like from one of our website clients Motor Matcher.?

To match with its personalised car finding feature on the website, we added some personal touch to the prompt ’Find My Car’– asking the user to find their car that best suits their preferences.?

Being mindful with points of views to use will also make a huge difference for your CTA buttons. Also, pronouns are a no-no for CTAs, considering its potential social impact.?

Tip #5 | Optimise CTAs for mobile use.

We’ve already covered optimal placements of CTA buttons. Now we head to another integral CTA tip you should take note of which is mobile-readiness.?

Due to larger display sizes of newly-released phones, the average smartphone display size has increased to 6.3 inches? Why is this important? The location of your website CTAs on mobile matters, especially with most people using just one hand for their phones.?

As you can see here, your hands can do website scrolling most comfortably at the bottom part of the screen, where your thumbs are. There, you can strategically place CTA buttons for them to click.?

Also, the button size matters. Your fingertips can cover up to 60 pixels wide. Ensure that your CTAs are large enough to be clickable by any finger.?

Tip #6 | Use website heat maps for CTA placements.?

Where your CTAs are positioned can spell the difference between your site gaining leads or nothing at all. One tool you can use for this is the website heat map.?

Website heat maps, like this one, shows you what parts of your site gain the most interactions from its visitors, represented by bright red colours.?

This can also be useful if you already got CTAs on your site. By testing, you can see if the buttons are positioned strategically for visitors to see or not.?

Tip #7 | Test those buttons!?

Of course, there’s no better way to know if your chosen CTA buttons work than testing it. A/B testing is one way you can judge this.?

When doing A/B tests for CTAs, you’ll be having two CTA buttons to test based on your preferences, and run the test to see what works best between the two.?

Good thing is, you can also run similar tests for other CTA elements, such as size, placement, and even colour.?

At this point, you’re already equipped with enough CTA knowledge. Ready to get started? Let us help you set things up! Visit our website at www.elephantintheboardroom.com to find out.?