30 Powerful Call to Action Examples That Are Successful

Some times the best way to learn is from looking at what others have done. That is why I have assembled some of the best call to action examples on the web.

I have written a comprehensive guide to calls to action already. Still, in this post, I want to put that theory into practice by reviewing 30 calls to action examples and understanding what makes them successful.

A compelling call to action makes use of many techniques, but to help us learn about what makes them work, I am going to categorise our call to action examples by the prominent method each utilises.

We begin with the use of colour.

Make Use of Colour

Colour can be a powerful way of drawing user’s attention to a call to action as you can see from Apple’s website. By only using the blue for their calls to action, it ensures that your eye is immediately drawn to them.

Call to Action Example - Apple Homepage

The next one of our call to action examples (Fullstory) takes that a step further by using colour to link calls to action in different parts of the interface.

Call to Action Example - Fullstory

Not that you can only to use an accent colour for your calls to action. You can use colour as a way of linking a call to action to an image or some other screen element, as the Save the Children website does. It uses colour to associate the call to action button with the dominant photo of the girl.

Call to Action Example - Save the children

Then there is the option to use a background colour to draw attention to a call to action. Rescue.org does this well.

Call to action example - rescue.org

However, a word of warning when it comes to colour, if you get the wrong colour combination, you can undermine visibility. For example, Mailchimp’s call to action ‘buzzes’ against the bright background, making it harder to read for some users.

call to action example - Mailchimp

With one in 12 men being colourblind and one in 200 women, it is essential to consider colour combinations carefully. As a general rule of thumb, do not rely on colour alone to draw attention to a call to action.

Instead, combine the colour with other design techniques, such as where you position the call to action.

Position Call to Actions Carefully

Placing your call to action in a strong central position high on the page will make it harder to miss when a user’s cognitive load is high. That is the approach adopted by another call to action examples — Intercom.

Call to action example - Intercom

However, having your call to action high on the page isn’t necessarily a requirement if you have visual elements that draw the eye down. Notice how the typography on the Spark website, draws the eye down to the call to action button.

Call to action example - Spark

Even centralising your call to action is not your only option. If your audience read from left to right, positioning a call to action on the left of a page can work well. That is especially true if there is strong typography to draw the eye to the call to action, as is the case on Evernote’s website.

Call to action example - Evernote

However, be careful. If there is another eye-catching element near to your call to action, the eye can quickly be drawn away from it. Take, for example, the way the eye skips over the booking box on the Hertz site to focus on the Fast Track ad.

Call to action example - Hertz.

Fortunately, there are a plethora of positioning techniques you can use to draw attention to a call to action. For example, Proof’s call to action breaks out of the page grid and associates itself very closely with an image of a face. That draws your attention to it.

Call to action example - Proof

Be Aware of Imagery

The relationship between imagery and your call to action will have a massive impact on whether a user sees the call to action or not. That means you can use a variety of techniques using images to draw attention to the call to action.

In another one of our call to action examples, notice how the rocket on Gift Rocket is drawing the eye to the right-hand side of the page where they have positioned the call to action and the associated copy.

Call to Action Example - Gift Rocket

Then there is the way that Just Giving associate their call to action with the image of the runner. Faces, in particular, draw our attention, making this call to action example work exceptionally well.

Call to Action Example - Just Giving

The Just Giving example would have been even more potent if the runner was looking down at the call to action. Directional indicators can be extremely useful in drawing attention.

Take a look at another of our call to action examples. ShaveKit positions the shaver on their homepage in such a way that it points directly at their call to action block.

Call to Action Example - Shavekit

Optimizely uses a similar trick with their illustration that surrounds and draws the eye to their call to action. Notice how all the lines in the grid draw the eye to the call to action.

Call to Action Example - Optimizely

Probably the best call to action example of using imagery to draw attention is Quicksprout, whose illustration leads the way to their call to action, one step at a time!

Call to Action Example - Quicksprout

You shouldn’t only at considering the relationship between imagery and calls to action. Every element has an impact.

Use the Power of Negative Space

One of the best ways of drawing attention to a call to action is to remove other elements that may distract. In other words, you surround your call to action with as much negative space as possible.

Pipedrive does an excellent job at removing any elements from their site that do not help the user decide to try their product.

Call to Action Example - Pipedrive

Convertkit takes this slightly further by leaving a significant amount of space around their primary call to action.

Call to Action Example - Convertkit

However, Pipedrive and Convertkit look downright busy compared to the Spotify homepage!

Call to Action Example - Spotify

Of course, not all of us are in a position to communicate our core offering so succinctly. But we can all adopt a cleaner, less fussy design like that used by Den.

Call to Action Example - Den

However, Grovemade goes a step further on their ecommerce site, reducing the screen elements for ordering to an absolute minimum.

Call to Action Example - Grovemade

How far down this path of minimalism you go will depend on what your call to action is and what you are promoting? However, a reliable guiding principle is only to include screen elements if they actively help the user decide to act. You should remove anything else.

If minimalism isn’t your thing, that is fair enough. It does not suit every product in every sector. In that case, you might want to consider using animation to draw the attention of users to your call to action.

Utilise Animation

At the most basic level, you can use animation to draw the eye. For example, Noom, literally have an animated arrow, pointing at their call to action.

The danger of these kinds of looping animations is that they can be distracting if not used with care. Sometimes a one-off animation is more effective.

Our next call to action example, Problogger, uses that approach by having their call to action fade in moments after the rest of the page loads. That makes it stand out from other page elements.

WP Engine does have a looping background animation, but it is subtle enough not to distract. However, they also use animation to display a chat notification which is an excellent way of grabbing attention.

Not that you can only use animation to grab attention. You can also use it to demonstrate the product in some way.

Rev is a call to action example that does this on their homepage. You instantly know that their product has something to do with audio, before using that same animation to explain their offering.

However, Muzzle goes a step further by using animation to demonstrate how bad life can get without their product!

The fact that animation can both draw attention and explain an offering makes it a potent tool. However, in most cases, copy will play a crucial role in determining whether somebody completes a call to action or not.

Good Call to Action Examples Use Great Copy

Good design can highlight a call to action, but it cannot sell it. That is where the copy becomes crucial. So what are the key things to consider when writing your call to action?

Call to Action Example - Dollar Shave Club

Dollar Shave Club follow a fundamental principle of selling anything. That is that you sell the benefit, not the feature. Their copy emphasises what the product gives you, rather than what it is.

However, you have to be careful that people understand what you are offering. Fortunately, in the case of Dollar Shave Club, the clue is in the name. But that is not always the case.

Call to Action Example - Time IQ

TimeIQ does a great job at letting you know at a glance, exactly what their product does and what it delivers.

Ultimately good copy should provide a balance of features (describing the product) and benefits (explaining how it helps). That is a lot to ask from a single sentence, but Hotjar does an excellent job.

Call to Action Example - Hotjar

That said, your choice of words matters too. The most compelling copy contains active, engaging language that encourages users to take action now. Call to action example, Greenpeace UK does this well on their homepage.

Call to Action Example - Greenpeace

Finally, don’t be afraid to address objections you users might have. For example, Zoho does not avoid the issue of its competitors. They are aware their users may be considering Hotjar and so directly address why they believe they are a better choice.

Call to Action Example - Zoho

What Call to Action Examples Will Not Teach You

Posts like this that deconstruct examples taken from other sites can be dangerous. Although it is good to be inspired by what others do, you cannot merely copy their approaches and expect similar results.

When it comes to your calls to action, dozens of different factors work together to determine whether somebody sees a call to action and resonates with it. One small change will make all the difference.

That is why ultimately you need to see call to action examples as the start of the design process and nothing more. The only real way of creating compelling calls to action is to have a robust testing process that puts your exact approach in front of people to see if it works. Simply, copying somebody else will not do the job.

Boagworks Boagworld