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’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.
- Testing 33 colors (blue, green, red, black, white, pink, grey, purple, yellow, orange, brown, as well as 2 shades of each colour) showed that red, green, orange and yellow tend to be the highest converting call to action colours. The colours black, brown and purple were the lowest converting call to action colours.
- Testing showed that a red button outperformed a similar green button by 21{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a}
- Another study showed having a red button increased their conversions by 34{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} instead of a green one.
- Another test found a 21{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} conversion rate increase when using a red button over a green button
- Test results showed that orange buttons increased overall website engagement by 5{4d2303c3d7018ed3e1a955ec2105d2bcecc5b881e14ee890535c5ae577f46e7a} (statistically significant).
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.
