The call to action button is the online version of the siren’s call, attracting as many people as possible to become your subscribers, leads and, eventually, customers. There are many things to say about the psychology and the careful testing behind a great CTA button. But we are here to help you and cut some shortcuts for you.
A great call to action button is one that says “click me!” in the person’s mind and they will listen to that compelling voice. It must stir curiosity, make an exciting promise and, most of all, stand out from the rest of the page so that the website visitor has their eyes immediately drawn to it.
There are a few key elements which make up the anatomy of a perfect call to action button. Let us examine them closely!
- The Copy
The design of the button may be the best you can get, but if the words placed inside them are weak, you won’t get any clicks. There is an entire craft behind the copy of the best CTA buttons we have seen. There are just a few words written in there, but they were turned around on all sides, and many synonyms were attempted until the final version came into being.
There is one key thing you must remember about CTA button copy: tell people what they will GET from you, not what they have to GIVE. “Subscribe here for our newsletter” tells people that they have to give their email address. “Get our weekly newsletter here” implies that they will receive something. A simple verb makes all the difference.
One more thing, since we are talking of verbs: use action verbs in your CTA button, verbs which imply doing something.
- The Placement
Where do you place a CTA button so that it attracts people’s eyes? In order to decide on this issue, you need to understand first how people browse a web page. There are two specific patterns: the F shape and the Z shape.
While the ideal placement may seem to be the area where these two shapes intersect, we rarely see CTA buttons at the top of a web page. Why? Because you must deliver a promise of sort before you get people to click on the button. As much emphasis as we put on the CTA button copy, it is not sufficient by itself to persuade people. Therefore, an ideal place for the button is at the bottom of the screen where these two shapes intersect (and this is where you actually find it on many websites).
- The Colour
There are many things to say about the ideal colour for a CTA button. Red seems a classic eye arresting colour, but now we have the “orange is the new red” philosophy. Red is a difficult colour, because it means both love and warning depending on the person’s mood.
It is worthwhile taking the time and A/B testing various colours until you find the perfect one for your landing page. Also, make sure that the colour of the button creates a great contrast with the background of the page.
- The Design
To frame or not to frame? Curved lines or straight angles? There are many pros and cons for each of these choices. However, various surveys and A/B test results indicate that most people favour smooth, rounded corners and a light, but definite frame. This is not a general rule, and that is why there is so much work and testing behind each great CTA button.
- The Behaviour
The key problem for many CTA buttons is that people do not perceive them as buttons, as something to click on. Whether it’s borderless design or insufficient contrast, they tend to perceive the button as part of the design, like a text box.
In order to correct this impression, you need to provide certain design elements or animations to make the button behave like a button. For example, when the mouse cursor hovers over it, make it change into a hand icon, or change the colour of the button. Adding drop shadow to make the button “hover” above the design is also a helpful idea.