The site is not yet optimised for mobile viewing. Please view on screens wider than 768px like your desktop screen.

CTA buttons and links

Buttons should be used as the main user interface for call-to-actions.

There are four buttons available in hierarchical order of use depending on how important the call-to-action is to the user. These buttons range from the 'boss' button, as the most urgent call-to-action, 'manager' buttons, 'worker' buttons, as our default button, down to plain buttons, mainly used on forms and filters. There are also large button styles.

Best practice

Buttons and text links should:

  • be labeled clearly, accurately indicating their destination page or action
  • lead with keywords ('front-loading') to assist user scanning
  • prioritise the use of buttons according to their role in the visual hierarchy, e.g. primary, secondary, standard (and text links)
  • do not overuse buttons on a page because this will undermine their role as a call-to-action. If you feel the need to use a lot of buttons on one page and they are each of equal importance, use standard buttons or Standalone text link.
  • text links should be long enough for users to activate them with the touch of their finger, e.g. at least two words.

Many larger UI modules such as 'Content panels' or 'Promos' have their button selection locked into design.

Related patterns

Buttons as call-to-actions

ACU has three buttons available as our main call-to-actions. These are Boss, as our primary button, Manager as our secondary button and Worker as our standard button. There are two size options although small is the standard.

This hierarchy of Boss, Manager and Worker buttons works best in the content area of a page with a white background. On coloured panels, however, it may make more sense to swap the Boss and Manager button styles so that they best fit with the background colour. For example, Manager purple button on a red background panel (see examples below).

button hierachy

See Google Material Design for more on the importance of button hierarchy.

In-page events

The loading and complete states (see below) are used for in-page events actioned when the user clicks on the button and a change is made on the same page (e.g. new data is loaded). The complete state signifies that the event has successfully loaded, e.g. new data on the current page.

The Boss button

Usage

The Boss button should be reserved for the most important or 'loudest' action on a page, ideally just once per page. If there is more than one primary call-to-actions then it is better to use the Manager button. Otherwise, we risk undermining the role of the Boss button as the button with the highest emphasis as a call-to-action on a page.

Note, not every page should have a Boss button - only when a important call-to-action is clearly present (outside of the interface, e.g. search button).

Definition

Example

Default Hover/focus/active Loading Complete Disabled
$cta--boss

Code samples

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • font-size: 1em
  • Text color: $white
  • background color: $red--100
  • border colour: none
  • border-radius: 1px
  • padding: 0.5em 1.55em 0.55em 1.55em;
  • style: flat colour

Hover, focus, active states

  • background color: $red--120
  • text-decoration: underline

Loading state

  • Text color: $white
  • background color: $red-100
  • keyframe opacity: .3 .6 1 @ 0% 50% 100% ??

Complete state (for in-page events)

  • Text color: $white
  • icon: check-white.svg

Disabled state

  • Text color: $white
  • background color: $black-80
  • border colour: none

Forthcoming...

Forthcoming...

Manager button

Usage

Manager buttons should be used when there are two or more call-to-actions of equal importance to the user. If there are too many call-to-actions of equal importance, then use the worker button instead. The ideal number of manager buttons on a page should be between 2 and 5. However, some situations may call for more, e.g. call-to-actions to each campus.

Example

Default Hover/focus/active Loading Complete Disabled
$cta--manager

Code samples

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • font-size: 1em
  • Text color: $white
  • background color: $purple-100
  • border colour: none
  • border-radius: 1px
  • padding: 0.5em 1.4em 0.5em 1.4em
  • style: flat colour

Hover, focus, active states

  • background color: $purple-120
  • text-decoration: underline

Loading state

  • Text color: $white
  • background color: $purple-100
  • keyframe opacity: .3 .6 1 @ 0% 50% 100% ??

Complete state (for in-page events)

  • Text color: $white
  • icon: check-white.svg

Disabled state

  • Text color: $white
  • background color: $black-80
  • border colour: none

Forthcoming...

$cta--Manager

More forthcoming...

Worker button

Usage

Worker buttons are our standard or default button for call-to-actions. They should be used when there is no clear need for Boss nor Manager buttons on a page or for calls-to-actions with lower emphasis than the Boss and Manager buttons but still need more emphasis than the Standalone text link.

There is no limit to the number of Worker buttons to be used on the content area of a page. However, a common sense approach is encouraged. If the page looks to busy with buttons, try Standalone text link or lists of text links instead.

Example

Default Hover/focus/active Loading Complete Disabled
$cta--worker

Code samples

Default state

  • font-size: 1em
  • Text color: $red--100
  • background color: $white
  • border colour: $red--100
  • border-radius: 1px
  • padding: 0.5em 1.4em 0.5em 1.4em

Hover, focus, active states

  • color: $white
  • background color: $red--100
  • text-decoration: underline

Loading state

  • color: $red--100
  • background color: $purple--100
  • keyframe opacity: .3 .6 1 @ 0% 50% 100% ??

Complete state (for in-page events)

  • icon: check-red.svg

Disabled state

  • Text color: $black--80
  • background color: $white
  • border colour: $black--80

Forthcoming...

$cta--worker

More forthcoming...

Buttons within UI modules

Many of our UI modules such as Content panels or Promos use buttons as part of their design. Because these components often have a background colour there is a need to consider which call-to-action button to use depending on the contrast with the background colour and independent. Below we present some examples.

Usage

Modules have been designed for specific purposes (see the specific UI modules for more details), the role of the buttons within them is determined by that purpose as well as its background colour. Idealistically modules with buttons could be used instead of buttons within the content area as potential a louder call-to-action. See UI modules and their usage.

Example

Default Hover/focus/active Loading Complete Disabled

Code samples

Standard button on $purple--100 background

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • Text color: $white
  • background color: transparent
  • border colour: $white
  • border-radius: 1px
  • padding: 0.5em 1.4em 0.5em 1.4em

Hover, focus, active states

  • color: $red--100
  • background color: $white
  • text-decoration: underline

Loading state

  • border colour: $white
  • key frame opacity: .3 .6 1 @ 0% 50% 100% ??

Complete state (for in-page events)

  • icon: check-white.svg

Disabled state

  • Text color: $black--80
  • background color: $white
  • border colour: $black--80

Forthcoming...

Forthcoming...

Examples in action



$btn--boss on $purple--100


$btn-worker2 on $purple--100

Large buttons

Large buttons are used for extra predominance on a page.

Usage

Large buttons should be used sparingly in situations that demand a large primary or secondary call-to-action or within components.

Example

Default

Hover/focus/active


$btn--large--boss

Default

Hover/focus/active


$btn--large--manager

Code samples

Boss large button

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • font-size: 1em
  • width: 27em
  • Text color: $white
  • background color: $red-100
  • border colour: $red-100
  • border-radius: 1px
  • padding: 0.5em 1.4em 0.5em 1.4em
  • icon: Right-Arrow-2.svg

Hover, focus, active states

  • color: $white
  • background color: $red-120
  • text-decoration: underline
Manager large button

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • font-size: 1em
  • width: 27em
  • Text color: $white
  • background color: $purple--100
  • border colour: $purple--100
  • border-radius: 1px
  • padding: 0.5em 1.4em 0.5em 1.4em
  • icon: Right-Arrow-2.svg

Hover, focus, active states

  • color: $white
  • background color: $purple-120
  • text-decoration: underline

Forthcoming...

Forthcoming...

Examples


Buttons with icons

Buttons may include icons to help promote the purpose of the call-to-action.

Usage

When using icons with a button, the icon should clearly help the user identify the purpose of the button's action.

Description

Code samples

Search


$primary--btn--search

Complete state


$primary--btn--complete

More filters


$secondary--btn--more
<button class="button primary">Search <span class="icon icon-Search"> </span></button> <button class="button primary complete"> <span class="icon-demo icon icon-Check-2"></span> </button> <button class="button secondary">More filters <span class="icon icon-Add"> </span> </button>

More forthcoming...

Forthcoming...

Plain buttons

This is the most plain button style used mainly for actions within a form or as tags.

Usage

Use mainly for actions within a form such as filters or as tag links. It can also be used in a large button style, for example, as a load more button on a listing page.

Example

Default Hover/focus/active
Tag name Tag name

Code samples

Default state

  • font-family: Avenir Heavy, arial bold, sans-serif
  • font-size: 0.9em
  • Text color: $charcoal--120
  • background color: $white
  • border colour: $black--40

Hover, focus, active states

  • color: $white
  • background color: $black--80
  • text-decoration: underline
<a class="button plain" href="">Tag name</a> <a class="button plain" href="">Close filter <span class="icon icon-Close"> </a>

More forthcoming...

$plain--btn $plain--btn--close

More forthcoming...

Examples in action



$plain--btn--large

Tag examples:
Plain button (see 'Tags', bottom of page)

Related patterns

Links

Text links are used as the least important call-to-action and should be considered as the default way to link

Usage

There are two types of text links:

  • Standalone text link
  • Text link
Standalone text link

Use the Standalone text link as a text link outside of a paragraphy or block of text copy. In terms of emphasis it use it as the next call-to-action below a Worker button.

Standalone text link uses an arrow icon, called 'Right-Arrow-2', on the right.

Text link

This is the standard text link used within a paragraph or block of text. Because standard links often occur within surrounding block of normal text such as paragraphs, these links need to stand out from both their background-colour, normally white, and the surrounding text colour, normally charcoal--120. For accessibility reasons (see 2.2.4, Colour), this requires a minimum contrast level of 4.5:1 against the background colour and 3.0:1 against the surrounding text. Outlined below is here comply with this requirement.

When using black--80 as the text colour, the link colour becomes purple--100. At other times it remains red--100 on white backgrounds.

Example

Default Hover/focus/active Visited
text link text link text link
Standalone text link Standalone text link Standalone text link
text link with black--80 copy text link with black--80 copy text link with black--80 copy
text link with purple--100 copy text link with purple--100 copy text link with purple--100 copy

Code samples

Examples in action


text link smaples

Text links on coloured backgrounds

Usage

Text links are white when used on either of our two primary colours (red--100 and purple--100).

Examples
Default Hover/focus/active Visited
text link with white copy text link with white copy text link with white copy
Standalone text link Standalone text link Standalone text link
text link with white copy text link with white copy text link with white copy
Standalone text link Standalone text link Standalone text link

Code samples

Link with copy

Default state

  • color: $white
  • text-decoration: underline

Hover, focus, active states

  • color: $white
  • text-decoration: none

Visited states

  • color: $white
  • text-decoration: underline
Link with icon

Link with icon

  • color: $white
  • text-decoration: none

Hover, focus, active states

  • color: $white
  • text-decoration: underline

Visited states

  • color: $white
  • text-decoration: none

Forthcoming...

$white

More forthcoming...