Call to Action Buttons

December 27th, 2009

How important are call to action buttons?

Every designer should set a priority when it comes to call to action buttons. They are the key to your product or the service that you’re offering. You want your users to click on that specific, download, free trial or free quote button, that is why it should stand out from the rest of your design. I’ve seen that many businesses are making their call to action even bigger and bolder than the logo they are having on their site, that’s how important call to action buttons are.

Call to Action Buttons Examples

Feel free to download all 12 png buttons. They are with clear (transparent) background.

In this example I am using only three colors. Green, blue and orange with the nice rounded corners and lite shade in the background. These are three most used colors for call to action buttons, of course with the different tones. 

Let’s talk about red color (Hex: #FF0000) Red is power and yes red does drive an attention to drivers on the road, however at the same time red means STOP. This doesn’t mean that you should not be using red, but if you do, try to cut your #FF0000 to something like to (Fire Brick Hex: #b22222, or Indian Red #cd5c5c) if you want to go little lighter.

Color is important, place of your call to action is too, don’t place your button below the fold where nobody can see it, however the language (text) that you put on your call to action buttons is extremely important.

Insurance Sites and Call to Action Buttons

Let us take a moment and review some of the call to action buttons from the insurance sites.

http://www.autoquoter.com 

Here is a great, clean way to show your call to action button. Nice orange tone, with clean language that says START.

http://www.esurance.com

Esurance does very similar as AutoQuoter with rounded orange button, in this example their call to action button is bigger than the previous example.

http://www.progressive.com

Progressive on other hand is using the blue button and again rounded corners. In this case they are forcing Get a Quote text more, than the real button, nice way to do this, although orange would match that blue color much nicer, rather than blue on blue.

http://www.statefarm.com

Even the State Farm Insurance, the company that’s all about red, very recently re-designed their website and reduced the red, which was all over  the place. Once again the blue GO button would look better and it would grab more attention if the button was little different from the blue background itself.

Don’t think for second that just because they are big companies and because they hired the best marketing firms, their call to action are perfect.  Here is the perfect example how their entire call to action, including the button was looking back in 2008 and simply compare to their current website.

Well that’s all for now, comment if you like :-)