Buttons are used to initiate an action or for navigation.
- Keep labels simple and short – no more than two to three words long and clearly describing the action or destination.
- Additional invisible text can be included to ensure the accessibility of the link.
- All buttons other than the transparent button are built to work on light and dark accent colours.
- All buttons have a minimum height of 55px and a minimum width of 100px to ensure a sensible clickable/tappable size.
- Primary buttons should be the most visually prominent element on the page.
- Transparent buttons are for use over areas of strong colour, eg. promotional modals.
- Icon buttons can be used to highlight certain actions such as download etc.
- Print buttons should only be used when linking to a page that is specifically designed for printing or if being added via JavaScript to print the current page.
- Full width buttons should be used where a button must display the full width of its container.
- Next and back buttons should be centralised where space allows.
- Buttons display at full width in mobile views.
- See style guide for colour and typography rules.
- Icons should not be used on transparent buttons on accent colours.
- Avoid using multiple instances of primary buttons on the same page. Instead use secondary button styles, links, chevrons or imagery to differentiate calls to action.
Examples
Primary
The primary button should be the most visually prominent element on the page. If possible, avoid using multiple instances of primary buttons on the same page. Instead, for example, use secondary button styles, links, chevrons or imagery to differentiate calls to action.
Secondary
Transparent
For use over area of strong colour eg. promotional modal.
Next
Icon buttons should NOT be used on transparent buttons on accent colours.
Previous
Icon buttons should NOT be used on transparent buttons on accent colours.
Only to be used when linking to a page that is specifically designed for printing or if being added via JavaScript to print the current page. Icon buttons should NOT be used on transparent buttons on accent colours.
Download
Icon buttons should NOT be used on transparent buttons on accent colours.
Top
Icon buttons should NOT be used on transparent buttons on accent colours.
Disabled
Full width button
Make a button display full width of its container.
Button group
Group of buttons on one line.
Button group of three (first button feature)
Group of buttons three on one line, with the first button being a featured primary button. At small screen sizes the two secondary buttons stay side-by-side under the primary button.
Next and previous button group
Next and back buttons that are centralised on screen when on large enough screens.
Notes for developers
When a button needs to be more descriptive of what/where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually, for example:
<a class="btn" href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></a>Important:As additional markup is required for styling inputs, please use standard buttons unless absolutely nessassary.
Using a disabled button
Do not rely solely on styling for disabled buttons (<button>, <input type="button" /> or <input type="submit" />): explicitly provide the disabled="disabled" attribute.
<input type="submit" value="..." disabled />Notes for testers
- Ensure that buttons can be accessed via the mouse as well as via tabbing using the keyboard
- Use a screen reader to confirm that the buttons are understandable as to where they will be going when listed out of context of the page
- Ensure that when hovering over a button the style changes noticeably.
- Ensure that when a button has focus the style changes noticeably.
- Ensure that text within buttons is descriptive of what or where the button is going. Additional text descriptive text can be hidden visually from the user to aid in make the button understandable especially if there area number of links/buttons such as "Find out more" on the page which go to different locations.
- Ensure that all buttons are device agnostic, so must not specify how a user should be interacting with a button eg. click.
Code Examples
Primary
<button class="btn btn--primary">...</button>
<!-- or --->
<span class="btn btn--primary btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--primary" href="...">...</a>Secondary
<button class="btn">...</button>
<!-- or --->
<span class="btn btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn" href="...">...</a>Transparent
<button class="btn btn--transparent">...</button>
<!-- or --->
<span class="btn btn--transparent btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--transparent" href="...">...</a>Next
Note: Call to action buttons will NOT work with <input> elements as they are not compatible with the CSS :after pseudo element.
<button class="btn btn--next">...</button>
<!-- or --->
<span class="btn btn--next btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--next" href="...">...</a>Previous
Note: Call to action buttons will NOT work with <input> elements as they are not compatible with the CSS :before pseudo element.
<button class="btn btn--previous">...</button>
<!-- or --->
<span class="btn btn--previous btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--previous" href="...">...</a>Note: Call to action buttons will NOT work with <input> elements as they are not compatible with the CSS :after pseudo element.
<button class="btn btn--print">...</button>
<!-- or --->
<span class="btn btn--print btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--print" href="...">...</a>Download
Note: Call to action buttons will NOT work with <input> elements as they are not compatible with the CSS :after pseudo element.
<button class="btn btn--download">...</button>
<!-- or --->
<span class="btn btn--download btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--download" href="...">...</a>Top
Note: Call to action buttons will NOT work with <input> elements as they are not compatible with the CSS :after pseudo element.
<button class="btn btn--top">...</button>
<!-- or --->
<span class="btn btn--top btn--input"><input class="btn--input__inner" type="button" value="..." /></span>
<!-- or --->
<a class="btn btn--top" href="...">...</a>Disabled
Note: Form elements can be disabled by simply setting the disabled attribute (although the class of is-disabled will still work). Anchor buttons are unable to use this attribute, so can only make use of the class.
Caveat: Events are attempted to be suppressed by setting pointer-events: none, however this is only supported in modern browsers, and as such it is recommended to use JavaScript to disable on legacy browsers.
<button class="btn" disabled>...</button>
<!-- or --->
<span class="btn btn--input is-disabled"><input class="btn--input__inner" type="button" value="..." disabled /></span>
<!-- or --->
<a class="btn is-disabled" href="...">...</a>Full width button
<a class="btn btn--full-width" href="...">...</a>Button group
<a class="btn btn--full-width" href="...">...</a><ul class="btn-group">
<li class="btn-group__item">...</li>
<li class="btn-group__item">...</li>
</ul>Button group of three (first button feature)
<ul class="btn-group btn-group--feature-three">
<li class="btn-group__item">...</li>
<li class="btn-group__item">...</li>
</ul>Next and previous button group
<ul class="btn-group btn-group--pagination">
<li class="btn-group__item btn--next"><!-- Next button --></li>
<li class="btn-group__item btn-group__item--prev"><!-- Previous button --></li>
</ul>Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.btn |
Base button style (white), hover/focus blue | Yes | button, input, a |
|
.btn--primary |
Primary button (yellow), hover/focus blue | .btn |
||
.btn--transparent |
Transparent button, hover/focus blue | .btn |
||
.btn--next |
Next button with icon | .btn |
||
.btn--previous |
Previous button with icon | .btn |
||
.btn--print |
Print button with icon | .btn |
||
.btn--download |
Download button with icon | .btn |
||
.btn--top |
Top button with icon | .btn |
||
.is-disabled |
Disabled button with no states (greyed out) | .btn |
||
.btn--input |
Styling for buttons that are inputs | Yes | span |
This span is to directly surround the form input that requires button styling |
.btn--input__inner |
Styling for buttons that are inputs | Yes | .btn--input > input |
|
.btn--full-width |
Make button stay full width of its container | .btn |
||
.btn-group |
Grouping of buttons left to right | Yes | ul |
|
.btn-group--feature-three |
Modifier for button group - places second two buttons on same line at small screens | .btn-group |
Only to be used with three buttons, with the first being a primary button | |
.btn-group__item |
Grouping of buttons left to right | Yes | .btn-group > li |
|
.btn-group--pagination |
For placing next and previous buttons centrally. Next button appears before Previous button a small screen but to the right on medium or large screen | .btn-group |
Keyboard operations
- TAB
-
Tabbing to an anchor should make the button clearly visually different so that the focus point on the page is obvious to the user
- SPACE or ENTER
-
With focus on a button, pressing SPACE or ENTER will open the link if a link or perform the form action. If the link is internal to the page it will scroll the page otherwise it will load the new page.