Inbound Internet Marketing Blog

SEO, Blogging, Social Media, Landing Pages, Lead Generation and Analytics

SUBSCRIBE

The HubSpot Inbound Internet Marketing blog covers all of inbound marketing - SEO, blogging, social media, lead generation, email marketing, lead nurturing & management, and analytics. Join 51,557 others and subscribe now!

Subscribe to RSS feed Add us on Facebook! Follow us on Twitter

Get Free Marketing Info!

Get the world's best marketing resources right to your inbox! Join more than 817,000 inbound marketers!

Subscribe by email

Your email:

Listen to this blog!

Work at HubSpot!

JoinTheHubSpotTeam resized 200

HubSpot's Inbound Internet Marketing Blog

Current Articles | RSS Feed RSS Feed

4 Tips to Supercharge Call-To-Action Buttons

 

.

On pages where a call-to-action is the focus, one of the most important features is the conversion button itself. We’ve seen single changes in buttons that can improve conversions by well over 30%. A button sounds like a simple decision, but there are a number of variables that quickly make the decision feel complicated. How big should the button be? What color? What should the text of the button say? Here are a few tips to make your buttons more successful.

1. Button size- Make it BIG!

A big button gets noticed. It doesn’t have to be huge, but if your button is too small, it can be ignored. We’ve found that a good button size is around 225px wide and 45px high

toosmallgood size

2. Button Location -- Put it above the fold!

When deciding where to put your button, think about the flow of your page. Does it follow the path of your eye? Does it fit average browser size? Browsersize from Google Labs is a great tool to find out what portion of your page most visitors can see without scrolling.

Ditech

3. Button Color - Make it Contrast

Color matters. Strong, contrasting, colors generally perform better than colors that blend in with the theme of your landing page. Take this example from Carelogger, who increased their conversions by 34% with a red button instead of a green one.

carelogger

4. Button Text -- Include a call-to-action

Your button text should tell people what to expect. Instead, we generally opt for a strong call-to-action. Firefox improved their conversions by 3.6% (over 500 more downloads per test) when they changed their button text from “Try Firefox 3″ to “Download Now – Free.” “Download Now,” “Get Started Today,” and “Free Trial” are all good examples of strong calls-to-action.

A Bonus: Test, Test, Test.

There’s no universal right answer for what webpage works best, but testing can ensure that your webpage is the best that it can be.

ctas-ebook

Posted by Meghan Keaney Anderson on Mon, Jul 25, 2011 @ 02:30 PM

COMMENTS

OK - we'll give some of these a try!

posted on Monday, July 25, 2011 at 3:20 PM by pubfish, inc.


Another tip - make the button change on mouse hover. This helps the user know that it is clickable. You can use simple CSS to accomplish this.

posted on Monday, July 25, 2011 at 3:22 PM by Nick Taylor


Great to see this article. We ran a seminar last week mainly about content structure, but we spent some time talking about calls to action. Like you, we spoke about the size, colour, placement and wording as being important. We also added something else - offering a choice - for example 2 buttons, one saying "Sign up now" (or something similar), or, "See a demo" The either or approach seems to drive at least one action, often followed by the next one.

posted on Monday, July 25, 2011 at 3:50 PM by Allan Kent


Great tips. I'm wondering if there's any research regarding the exact placement of the button -- of course it should be above the fold, but does the placement in any specific quadrant generate more click-thru's?

posted on Monday, July 25, 2011 at 4:00 PM by Namita Patel


That's a great question Namita. It is commonly thought that (English or Romance language) websites are read left to right, like the pages of a book. So that can give you a sense of where you might want to place a button (before or after the page text is read). But it would be worth a/b testing. Anyone else have ideas on this?

posted on Monday, July 25, 2011 at 4:08 PM by Meghan Keaney Anderson


You can also use an animated .gif button that changes color / blinks to draw the eye of the user. Animated gif files work in any web browser and are easy to make. Google the free microsoft GIF Animator or use your own paint tools to make them.

posted on Monday, July 25, 2011 at 4:12 PM by Richard


Thanks Meghan. A/B testing makes sense. I guess the thought flow on the page would dictate appropriate placement, although that sometimes results in placement below the fold. In any event, it's worth some thought.

posted on Monday, July 25, 2011 at 4:17 PM by Namita Patel


Interesting to state that a contrasting coloured button converts more than one that blends in with surrounding branding colours. Its such a simple concept, but one that is obviously overlooked!

posted on Monday, July 25, 2011 at 4:37 PM by Karen


Does the shape of the button have any effect on it's use?

posted on Monday, July 25, 2011 at 4:51 PM by John Sweeney


Thanks for the post. Im going to test out the red coloured tone buttons.

posted on Monday, July 25, 2011 at 4:54 PM by King Rosales


One thing I'd throw in is illustrated in the pic for #2 - POINT or LOOK at the button with your images. 
 
There's tons of examples out there of the hero image on the page looking or pointing straight at the CTA button.

posted on Monday, July 25, 2011 at 8:49 PM by Christopher Haddad


Do you think there should be a Call to action button on each page?  
 
We believe you should as your content on each page should cater to all buying stages that a visitor may be at, at that time. We believe if your selling a service, a "contact us" button should be on the page at the very minimum to increase the chances of a "buyer" who is ready to make contact actually doing so.

posted on Tuesday, July 26, 2011 at 2:13 AM by Sam Halcrow


I'd definitely recommend testing lots of versions. We had tested 7 different CTAs on ecommerce site and a winning 'recipe' had double-digit increase in revenue per visitor!

posted on Tuesday, July 26, 2011 at 8:31 AM by Slavik Volinsky


Thanks for the information, this will help with me getting started on this social media adventure @tessaduckett

posted on Wednesday, July 27, 2011 at 11:05 PM by Tessa Duckett


Re color contrast: I've seen reports that red buttons convert the most traffic. 
 
Any legal implications for changing the color of a brand's icon (eg: Facebook is normally blue. Anything illegal about making it red?)

posted on Sunday, August 07, 2011 at 11:11 AM by Caitlin Roberson


Comments have been closed for this article.