Skip to main content

5 Tips For Creating An Effective Call To Action Button

By Jennifer Farley



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

ComeInWereOpen Most people who own or run a web site want their users to do something when they come to the site and see the content. You might want the user to:

  • Buy something from your site
  • Contact you for a quote
  • Sign up for a newsletter
  • Download your free eBook

But how do you get them to do that? Do you just hope for the best? Have a tiny link that won’t interrupt their enjoyment of your beautiful design and great content? Have a massive button that they can’t miss?

Call to action buttons are the best way to grab attention, but you need to make it clear exactly what it is you want the user to do. Here are five tips to keep in mind when designing a call to action button or advert.

1. Language

Keep the message short and use language the visitor will understand. Don’t talk about procurement when people want to buy. Start a call to action with a verb such as “Sign Up Now,” “Download,” “Buy Now,” “Get A Quote.” The home page on Twitter (below) has a fairly large green button calling users to “Sign Up Now.”

While it’s important to keep the text on the button short and snappy, it’s helpful to also explain the value behind the action the user is taking. On the Twitter page, it’s a simple line inviting you to join the conversation.


2. Color

Bright and colorful buttons grab attention. It’s also important that there is good contrast between the button color and the web page or Div background. Amazon’s main content has a white background but in the sections containing the orange Add To Cart buttons, the background is light blue, a complementary and contrasting color with orange.


3. Size

Yes, the old joke about size matters. But size does matter when you’re trying to get noticed and in general, it’s fair to say that big is beautiful when it comes to designing call to action buttons.  The size of any element on the page dictates the priority or how important that element is on the page. If you really want someone to do something, forget about being subtle.

Are you thinking about buying the CSS Anthology book from Sitepoint? On that book’s page you might notice a big beautiful button offering you a free download of sample chapters.


4. Imagery

The use of icons on buttons can add extra emphasis and draw the eye to the button. The download buttons for Firefox and Thunderbird are absolutely jumbo sized. And very pretty too, with beautifully designed icons integrated into the buttons.



5. Positioning

It’s important to be consistent with where you place your call to action button. You don’t want users to have to expend any effort whatsoever in finding the call to action.

On the Squarespace homepage you’ll see a large call to action at the top of page. You’ll also find a similar, slightly smaller button in the footer of EVERY page.



Taking eBay as another example, the call to action button is not particularly big or colorful, but it is consistently positioned at the top of every product page. Whether it’s a Place Bid or Buy Now button, the ebay user is left in no doubt about where to click to get their goods.


These tips can help you make decisions about your call to action button, but ultimately the best way to find out if it’s working for you is to test it. So put your big, bright, beautiful button on to the page and see what kind of response you get.

What additional tips would you add to this list?

Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

New books out now!

Get practical advice to start your career in programming!

Master complex transitions, transformations and animations in CSS!

Latest Remote Jobs