Call to action buttons

A call to action (CTA) should encourage a user to carry out an action, for example, book on an open day, make an enquiry or purchase something. These CTAs are for our standard left side menu webpage design that the majority of our pages use.

The style is achieved by applying a class to your link. Use this method for stand-alone links only. Don't apply the style to a link mid-sentence.

How to create a call to action button

Within your page:

Type your link text
Highlight your text
Create your hyperlink using the Insert/Edit Link button
In the standard link properties, click within the CSS class box and select your CTA class (choose from the options below)
Save link properties

To ensure the best possible results, there are a number of things to be aware of:

Ensure each new CTA is created in a new paragraph, this will keep them all evenly spaced
You can force your text to fall onto the next line by inserting a line break (Shift+Enter) - but do this after you've applied your link and class otherwise it might break
Don't use too many CTAs on a page - they are supposed to guide the user to the main action you want them to take from that page

Which classes to choose?

We hope the class names are intuitive (for example, CTA-plainArrow for a basic arrow). However, if you're struggling to decide which to use, here's a hint:

Any beginning with CTA-plain are the lighter and less obtrusive CTAs - a light neutral background is applied
Those beginning with just CTA- have a blue background from the university colour palette
If you want to change the CTA class, go back into the link properties and remove the current class and apply a new one

Available CTAs

Please note, there may be slight style differences from how these look below when using these on the left side menu template, for example, no rounded corners or slightly different colours.