Buttons

When to use buttons

Buttons and links may look similar, but they perform different jobs on websites and forms:

• Links take people somewhere, such as another page, document, or website.
• Buttons make something happen on the current page, such as submitting a form, accepting or rejecting cookies, opening a menu, or starting a download.

Using the correct element helps everyone understand what to expect and makes websites easier to use with keyboards, screen readers, and other assistive technologies.

A simple rule to follow is:

• if it goes somewhere, use a link
• if it does something, use a button

Colours and states

All buttons should use consistent brand colours:

• Primary or action buttons: Teal (#006072) or green (#006637) background with white text
• Secondary buttons: Grey (#c1c1c1) background with black text
• Inverted buttons: Transparent background and a 2px white border with white text

Buttons and links both use hover and focus states, which change automatically when a customer interacts with them. State changes help the customer understand that they can interact with the element and see clearly where they are on-screen if they are using keyboard-only navigation.

Hover state colours

• Primary or action button hover colours: Dark teal (#004d5b) or dark green (#004d29) background with white text
• Secondary button hover colour: Dark grey (#cdcdcd) background with black text
• Inverted button: White background with black text

Focus and active state colours

Focus and active states look the same to the customer regardless of the type of button or link. They are highlighted with yellow and black to stand out easily.

• Background: Bright yellow (#f5CE3E)
• Border: 2px black (#000000)
• Text: Black (#000000)

Button text

Button text should be short and describe the action the button performs. Where possible use consistent wording so the customer knows what to expect from the action:

• Start now – at the start of the service
• Sign in – to an account a customer has already created
• Continue – to move to the next part of a form
• Save and continue – when the service offers the ability to save the customer’s information
• Save and come back later – when a customer can save their information and come back later
• Add another – to add another item to a list or group
• Pay now – to make a payment
• Confirm and send – on a check summary page to confirm submission of a form
• Sign out – when a customer is signed in to an account

Primary and secondary buttons

Primary and secondary buttons should have a clear colour distinction. Primary buttons must use the brand teal colour and should appear first, secondary buttons should use lighter colours to help emphasise the primary interaction.

Action buttons

Action buttons like ‘Start now’ or ‘Accept additional cookies’ should include an arrow that points to the right. They often use our brand green as this is a commonly recognised colour for taking an action on-screen.

You can download the arrow we use as an SVG, if you cannot use the SVG please use an icon that is as close as possible.

Action button arrow – SVG

Right pointing arrow to be used on all action buttons

SVG, 418 bytes

Buttons on dark backgrounds

When buttons or links appear on dark backgrounds it is important their colours are changed to make sure they still stand out.