<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Perferendis assumenda</a>
<!-- Call to action button end -->
This is to be used on solid colour backgrounds where the standard button doesn't work.
<!-- Call to action button start -->
<a href="#" class="button button--cta button--cta-border" role="button">Sint molestiae</a>
<!-- Call to action button end -->
<!-- Call to action button start -->
<a href="#" class="button button--cta ext" role="button">Provident corporis</a>
<!-- Call to action button end -->
The compact version is used when stacking multiple CTA buttons. It reduces the vertical space between them.
NOTE: CTA buttons should not be used multiple times in the following 'stacked' way. This class has only be introduced to deal with legacy use.
<!-- Call to action compact button start -->
<a href="#" class="button button--cta button--cta-compact" role="button">Harum sunt hic laborum</a>
<!-- Call to action compact button end -->
This class can also be added to the border version:
<!-- Call to action compact button with border start -->
<a href="#" class="button button--cta button--cta-border button--cta-compact" role="button">Assumenda quia qui non</a>
<!-- Call to action compact button with border end -->
It's an often-cited fact that the vast majority of users don't read the entirety of a web page, they scan through it picking out salient words and phrases.
As designers and producers of web content, we need to be mindful of this, and make design decisions that guide our users on a path towards a clear end goal.
In order to help our users to achieve their goals (or direct them towards actions that we want them to take), we need to make sure that we're accessing ingrained behaviour patterns, not making them search out the parts of our content that will lead them there.
Buttons are a recognisable object that shows a user that an action is expected or available, so using them as a CTA uses those ingrained behaviour patterns: a user sees a button and knows that clicking it will do something; hopefully, what they came to that page looking to do!
A call to action button is designed to grab the user's attention and direct them towards a course of action that we want them to take.
For this reason, we use buttons to denote where we want a user to click: if our main call to action is a paragraph of text or a hyperlink, it won't be as effective as a button.
A web page could have multiple calls to action on it, but these should have a hierarchy, indicated by the size of the button and its place on the page.
As you can see in the example above where the obvious CTA is denoted by a button, but the secondary CTA is a hyperlink.
When it comes to CTA buttons, the copy on them should be short and to the point: anything over 10 words is far too long; below 5 is ideal.
CTAs Should be action oriented and begin with a verb e.g. get, download, register. They should also use simple, accessible language: don't make your users think too hard about what they need to do!
Below you can see a (fictional) example of a call to action button and some alternative ways to phrase the copy on it to promote your users towards an action*
*not actual CTA design patterns! (smile)
A CTA should be clearly differentiated from the rest of the content around it, it shouldn't be competing with other page elements for the attention of your users. Prime placement for a CTA is the top of the page, but they can work well elsewhere if the content and page design leads the user to a logical place.
A CTA button should never be placed inside an accordion, doing so leads to the buttons being overlooked by users, and can be challenging for people using assistive software.
Ideally, a CTA should have clear amounts of white space around it to signify its importance on the page.
Even with the tertiary CTA below, you can see that there's a clear difference between that link and the rest of the content on the page because it is not fighting for recognition with anything else, other than the CTA button next to it, which is clearly more important in the page hierarchy.When you look at the rest of the page you can clearly identify the page hierarchy from the placement and design of the CTA.
This is a subjective question. The optimal number of CTA on any one page will depend on the content and structure of the page.
Ideally, you wouldn't see more than 3-5 CTA at the same level of the hierarchy on one page. As you can see in the example above, if you use a CTA hierarchically, you can draw attention to multiple page elements without confusing or overwhelming users.