The call to action (CTA) button is a key design element on your website. It turns passive viewers of your web page into active and engaged participants, ready to add a product to their cart, book a reservation or sign up for your promotions. Making your CTAs stand out and engage users helps you achieve your online goals.
Let’s take a look at four elements of an irresistible call to action button, and how by improving your CTAs you can improve your users’ engagement with your website.
Consider their size
Within the visual hierarchy of a webpage, large objects indicate importance over smaller objects. When you’re designing your CTA, be sure to give it enough visual weight to make it clear to your users that this item is important.
Take a look at this Best Buy page. Did you notice the main call to action? If you didn’t, don’t worry; it’s a bit hard to spot.
Although it is bolded, the text of this CTA is the smallest typeface on the page, and the button’s overall size is quite small as well. Nothing about the size of this button makes it engaging. When designing a CTA, ensuring that it’s large enough to stand apart from the rest of the page establishes a visual hierarchy of the page.
Another thing to consider when sizing calls-to-action are the various devices the site will be viewed on. A CTA that you consider big when you designed it for a desktop experience may look quite small when viewed on a smartphone, and a CTA that was designed to be clicked on with a mouse may not work so well when a user is trying to press it with their thumb.
Apple recommends that CTAs be at least 44 pixels by 44 pixels to be touchscreen-friendly. Microsoft recommends 34 pixels by 26 pixels, and goes further to note that there should be at least 8 pixels of space between elements.
Be aware that there is a tipping point where the CTA becomes too big as well. If you go overboard, the button may instead look like a banner or heading, and users may pass right over it while they scan the page.
Color and contrast in a call to action button
A call to action should also use color effectively to stand out on the page.
When designing your CTA, ask yourself, does the button stand out from the colors around it? If you’re using muted colors throughout the site, is the button’s color muted as well? In the Best Buy example above, the CTA button is not only small, but its color and contrast are also weak — the page is mostly white, and the CTA button is white and light gray. A large yellow or orange button would have been eye-catching and created a spot for users to focus and engage, instead of simply scanning the page.
Compare that approach to this example:
Any question on what to do? The pink CTA contrasts as a bright focal point against the darker background photo.
When it comes to selecting colors for your CTA, there’s really no one choice to pick. Choose something that complements your website’s design, then take this opportunity to perform A/B testing on the color selection and track your results. That said, we do recommend that you avoid using gray, as it’s often associated with disabled buttons or menu choices, so that color could confuse your users. Gray also generally contrasts poorly with other elements on the page.
One last thought on color: Consider the accessibility of your website. Some of your users may be colorblind, so consider maintaining a good contrast of color hues in addition to choosing your palette.
A button needs to look like a button
If a user was scanning your webpage, would they think your CTA was clickable? Have you given thought to what makes them appear that way? Consider the shape of your button, and its placement relative to other elements on the page. Users shouldn’t have to guess which elements they can interact with — design your buttons and links so they can be identified quickly.
But what makes a button appear clickable? We’ve discussed color and size, but you can also look to add some type of 3D effect, like a gradient or small shadow, to add clickability to your elements. To ensure that your users properly identify every interactive element on your site, you can subtly hint at clickability by beveling the edges of your buttons.
The “Get Service” CTA on AM Cellphone Repairs’ home page has a darkened, beveled edge that makes it stand out:
Provide visual feedback
Be sure your CTA interacts with the user when he or she clicks on it. It’s very easy to add different visual states to your call to action button, such as a color change when the user hovers over the button, and another change when the user clicks on it.
Here is a CTA in its base state, hover state, and click state:
White space is another important component of successful CTA design. That doesn’t mean that the space around the button must literally be white, but rather that there is space around the button devoid of other design, so the eye focuses on the CTA. It gives the user a clear element to target with their mouse (or finger), and stands out by being the only element in that area of the page.
The empty space below and to either side of milkmade’s CTA help put it into focus for users:
Say what you mean
The content on your call to action buttons is your best opportunity to communicate with your users. Clear, concise copy promotes engagement and clarifies your intent, so don’t overlook this detail. The words of your button or link should be short, to the point, and actionable. Phrases like, “Add to Cart,” “Proceed to Checkout” and “Shop New Releases Now” all give clear indication to the user regarding what happens when they click.
Suggesting value within your call to action can be an effective hook for your users, too. “Sign Up for Free,” “Save 40%” and “Get 10 Free Songs” all give users an incentive to proceed and encourage clicking. Adding urgency to your CTA with words like ‘now’ and ‘today’ can also help convert a scanner into a clicker.
Finally, try being specific about what users will find when they click your CTA. Instead of using broad terminology like “Shop” as your CTA copy, let your users know exactly what they’ll be shopping for. The CTA for Fancifull Gift Baskets, for example, is simple, straightforward and specific:
Like with color, CTA copy gives you the opportunity to A/B test to determine which messaging works best for your users.
Take action with your calls-to-action
Take a look at your website’s calls-to-action. Are you effectively encouraging your users to click? If not, rethink the size, color, clickability and content of each one. If you need help revamping your CTAs or simply want to eliminate some of the guess work, a web design expert at Deluxe can make sure that your buttons not only look great, but also function the way that you need them to.
Editor’s Note: This post was originally published in November 2014 and has been revamped and updated for accuracy and relevance.