Technology / Website design

Creating compelling call-to-action buttons

Buttons are one of the most effective ways to lead your reader to your page’s call-to-action. Here are seven ways to make your call-to-action buttons irresistible.

2 November 2010 by

1. Size and white space

Small call-to-action buttons are easily missed when you’re scrolling through a web page. Buttons need to be big with lots of white space around them to really make them shine. For a main call-to-action, I’d aim for at least 230 pixels (px) wide by 50px high.

2. Contrasting colours

You might be tempted to use one of your brand colours or an understated colour for your call-to-action buttons. But your buttons need to be blatant, and should contrast with the rest of your site.

No single colour works best for everyone. Based on numerous studies, red buttons have been touted as more powerful than green, but it still needs to tie in with your website colours. It’s very simple to test, so experiment! See which gives you a higher conversion rate. Try reds, greens and the contrasting spectrum colours to your logo.

3. Icons

Adding a descriptive icon within the button can be effective in reinforcing your call-to-action. Icons such as a right arrow can signify ‘Next’, a down arrow, ‘Download’ and a magnifying glass, ‘Search’.

Generally, I’d pair the icon and compelling copy to reinforce the message, leaving nothing open to interpretation. A download icon on its own will not cause the same reaction to the same icon alongside the copy, ‘Download Now – FREE!’

"Pair the icon and compelling copy to reinforce the message, leaving nothing open to interpretation."

Want more articles like this? Check out the website design section.

4. Page positioning

Aim to place your most crucial button above the fold (i.e. high enough on the screen that the reader doesn’t need to scroll down before they see it).

5. Unique

Like text links, your call-to-action buttons shouldn’t be styled like anything else on the page. Again, they need to be dead obvious.

If you’re looking for a button in the true sense of the word, think about adding depth and texture to its design. You could also have the button look like it’s pressed when you hover the mouse over it.

6. Hierarchy

You might find you need or want more than one button per page. That’s fine, but be sure to use a hierarchy so your reader can instantly identify which button is the most important. Remember, you don’t want to make them think.

7. Compelling call-to-action button copy

Ultimately, this is what will make or break your buttons. Everything else is an influence.

Think of the copy on your button as a command. ‘Try it FREE’, ‘Download your FREE copy’ and ‘Sign up NOW’ are just three examples of straight-forward commands that leave nothing to the imagination. This is what you need to aim for.

Like the colours, test to see which button is creating a higher conversion rate.

What changes have you made to your call-to-action buttons to create a higher conversion rate? What didn’t work?

Amanda Gonzalez

designs and copywrites simple, effective websites for small businesses - without the fluff or jargon.

Comments

100,634 people use Flying Solo to help them create a business with life. Do you?

Connect with Flying Solo

Explore the benefits of membership