17 Best Practices for Crazy-Effective Call-To-Action Buttons
What Is A Call-To-Action Button?Call-to-action (CTA) buttons are the buttons you use in your website and on your landing pages to guide users towards your goal conversion. It's the part of the landing page that the user needs to click in order to take the action you want them to take. CTA buttons can vary in style and size depending on your goal conversion and website style. Some common examples of call-to-action buttons are:
- Add to cart buttons
- Free trial sign-up buttons
- Download buttons
1. Use Action-Packed Text. Call to action buttons should feature striking, action-oriented text. Substitute boring words like “submit” and “enter” for more action packed words like “get,” “reserve,” and “try.” Your action words should go along with specific text relating to your offer like:
- Try Our Free Trial
- Reserve Your Seat
- Download Whitepaper
Udemy’s “Take This Course” button text gives a a great offer-related action.
The Children’s Museum of Pittsburgh has a nice site design, but their button text could be better. Instead of boring “Go,” why not try “Book An Event” ?
2. The Colors Duke, The Colors. Your button color matters. It matter a lot. In fact, if you’re going to take only one tiny single piece of advice from this post, it should be to give careful consideration to your button colors.
Generally speaking, green and orange buttons are reported to perform best. Ultimately though it will depend on your site design, as contrasting colors work best to make striking buttons that stand out. You wouldn’t want a green CTA button on a green background.
Green and purple are contrasting colors – plus those dinos are adorableIf you’re not sure what looks best, run the super sophisticated squint test and see what comes off most appealing. However, if you really want to know what color CTA button will work best on your page, testing is the only way to go!
Check out this cool color psychology infographic from Kiss Metrics when you have the chance. It’s a pretty interesting study on how different colors inspire different emotions!
3. Snazzy Button Shapes. Button shape can also play a big role when attempting to craft the perfect CTA button. You’ll need to consider whether you want to go with a more rounded button shape or a button with square edges. Hard to say what works better here as both style are common and both can perform well in different settings. Ultimately you’ll have to test shapes and see what works best for your biz!
In ContentVerve’s test, a rounded green button did better than a blue rectangle
While it may seem absurd to imply that large text makes people feel anxious or uncomfortable, many users do experience subconscious distaste for threateningly large lettering. Your button text should be big enough to draw attention, but not so big that it completely overwhelms the rest of the content.
5. Button Text Shouldn’t Go On and On and On. We discussed earlier how it’s good to use specific action-oriented button text. Considering that, it may be tempting to stretch out your button text, but that’d be a bad move. Ideally you’ll want to keep that button text to two or five words.
this CTA button is probably OK, but it’s nearing the red zone
7. Create a Sense Of Urgency. Constructing a sense of subtle urgency in your call to action buttons can yield some impressive click-through rates. For example, you could use button text like:
- Sign Up and Get 50% Off Today Only!
- Download the Build Apps E-Course for
- Register For The Ultimate PPC Webinar Now!
8. Keep it Above the Fold. You always want to keep your call to action button above the fold so that users never miss it. As noted in an earlier post about landing page best practices, the important vital information should always be kept above the fold. The additional extra info should stay below the fold, where it remains assessable but not distracting.
9. Natural Hierarchy. Sometimes you’ll have other buttons on your web page that are not your main call-to-action conversion buttons. Those buttons should be less attention-grabbing than your main CTA button. For your non-CTA buttons, try using gray scale buttons or monochromatic colors. Your main call-to-action button should always be the biggest and brightest.
Starbucks does a nice job of clarifying their main CTA button while keeping within their color scheme
11. Get Fancy With Button Graphics. In some cases, small arrows or graphics on your CTA button can positively affect click-through-rates. If you’re going to use graphics, make sure that your icons clarify rather than confuse the offer for users. For example, you would want to avoid using a disk download icon for a user who is registering for a webinar.
12. Bonus Button Text. There are some situations where you may want to consider adding an extra line of information within your button text.
This practice is common with free trial buttons. For example, a free trial button might say “30 day trial, no credit card” in smaller text beneath the main “Start Your Free Trial” button text. This is valuable info that will encourage users to click through to begin their trial.
example from Dashboard
Alternatively, you can put that extra information underneath or beside a button. Copyblogger refers to these elements as “click triggers.” Some examples of click triggers include:
- Anxiety-Suppressing Info (e.g. No credit card required)
- Key Benefits
- Data Points (e.g. users see a 40% increase in shares when using X)
Example from Social Sprout
Having a PayPal button can be a huge incentive – there have been MANY times ordering food where I’ve been too lazy to fish out a credit card and only move forward by the grace of PayPal.
14. Less is More When it Comes to Choices. Us humans tend to suffer from the choice paradox – we enjoy choosing between an apple or an orange, but present us with apples, oranges, dragon fruit, grapes, pomegranates, bananas, clementine, and mangos and our heads may nearly explode with indecision.
In one study by Mark Lepper of Columbia University, participants who were asked to choose one chocolate from a box of six were happier with their selection than participants who selected one chocolate from a box of 30. Keep your users happy by giving them fewer buttons to choose from!
If you do want to include multiple button choices, give weight to once choice over others to help funnel users towards a specific path. It doesn’t even matter what path really – users just wanted to be guided!
Buffer offers several sign-in options, but emphasizes one over the others
Most importantly, never force users to backtrack in order to click a button – CTA buttons should appear in appropriate places that align with a user’s experience. For example, you would want to put a “sign up now” button in a spot where a user would find it after reading about your offer or product, not before, as it would make no sense for a user to sign up for an offer they know nothing about!
16. Widen That White Space. Your CTA buttons should always have a healthy chunk of white space surrounding them. White space helps call the users’ attention to your button and helps it stand out.
This CTA button from Mixbook has plenty of white space