Designing Call To Action Buttons

Most websites use buttons, so today we’re going to focus on button design. There are lots of ways you can encourage users to click your buttons and increase your conversion rates. The main way is to change the copy on the button, however today I’m focusing on design.

Primary and Secondary (Support) Buttons

The role of a call to action button is to get visitors to do something: buy, download, book, subscribe, register…
The Call to Action buttons, for example, “Submit”, “Request a Quote”, “Sign Up” should stand out visually. Here are some tips to make buttons more attention grabbing.

  • make them larger
  • make them a different colour to the rest of your buttons, and one that contrast with the background
  • give them 3D effects (shadows, bevels, gradient, lighting effects, rollover effects)
  • surround them with white space
  • increase the font size, and make it bolder

Secondary buttons such as “previous”, “cancel”, “forgot your password”, “privacy policy”, should not distract attention from the main call to action.
Twitter sign up form
Twitter’s “forgot password” button is grey and text only – it doesn’t distract attention away from the “Sign In” button (call to action)

Button Colours

Different companies use wide variety of colours for their main call to action buttons:

  • Pinterest – red
  • Amazon – orange
  • Facebook – blue
  • Google – grey

Split testing shows that green, red, and orange work all well as call to actions. The following studies can give you an idea of what colours work best.

For more information and statistics on the meaning of colours in marketing check out our infographic

Test It

Blur the page. (In Photoshop go to Filter > Blur > Gaussian Blur)
Can you still see where the call to action button is? If not, use some of the methods above to improve it.
For example, on firefox’s page, even when blurred you can tell straight away where the call-to-action button is:

Here’s the original:

If you’re looking to increase conversion rates on your website, why not request a free consultation now.

The founder of Attwood Digital, Mark is a digital marketing veteran having been working online since before the dotcom boom. He created the world's first online skip hire service in 2003, has created multiple online courses, lectured on digital marketing and even written a book on the subject. He is also an ICO advisor and crypto-enthusiast.
Write a Comment