Their main purpose is to trigger an action when the user clicks on them. It's important that the button label is clear about what action the button performs to the user.
- buttons can be
- use correct semantics for the button element
- use BEM modifiers for different types
- wording on buttons should be clear and inform the user what the button does
- words like ‘okay’ and ‘no’ don’t give the user enough information
- make sure the button text describes an action
- avoid excessively long button text
- consider the user's reading path before deciding where to put a button
- ensure that prominent buttons are displayed in a easy to spot location
- place buttons in a sensible order
- make it harder to find destructive buttons (Cancel, delete)
Use a main call-to-action button when the user is moving forward in a path, conveying a sense of purpose and urgency. For example 'Register now', 'Contact us' or 'Join the mailing list'. Try to have as few Call-to-action buttons per page as possible - just one is best
<p><a href="#" class="btn btn--cta">Register now</a></p>
Use the primary button for normal actions, do something within the page, typically to reveal more information, for example: 'View guidance consultations', 'List of guidelines' or 'Advice listing'.
<p><a href="#" class="btn">Find NICE guidance</a></p>
When you require a button type that sits lower in the hierarchy then a primary button.
<p><a href="#" class="btn btn--secondary">View guidance consultations</a></p>
Use the inverse (light) button button on an inverse (dark) background, to make the button distinguishable.
<p class="panel panel--inverse"> <a href="#" class="btn btn--inverse">Inverse button</a> </p>
If you are looking for an additional way to convey the label on a button. Instances of this could include: Refresh or loading state buttons.
<p><a href="#" class="btn"><span class="icon icon--pathways" aria-hidden="true"></span> View guidance consultations</a></p>
A dropdown menu with a set of related actions. Ensure that the button label is clear as to what the contents of the dropdown are
- disabled buttons are lowered down to 50% opacity to ensure they look unclickable
- if you are using disabled buttons, make sure there is a valid reason
- provide clear infomation on why it's disabled (error message or label text)
- you can use
<p> <button type="button" class="btn" disabled>Disabled primary</button> <button type="button" class="btn btn--cta" disabled>Disabled cta</button> <button type="button" class="btn btn--secondary" disabled>Disabled secondary</button> <button type="button" class="btn btn--light" disabled>Disabled light</button> </p>
If you need to show a close relationship between multiple buttons, used grouped buttons
<p> <button type="button" class="btn">Primary action</button> <button type="button" class="btn btn--secondary">Secondary action</button> </p>
We undertook an A/B test in April 2021 after feedback from user research revealed some users don’t recognise buttons as buttons. If a user is unclear on button functionality due to it being fully 'flat', they are unlikely to click it. An A/B test may reveal the best design combination to indicate clickable buttons to users.
|Original||Variation 1||Variation 2|
|Flat||Solid shadow, 3 pixel radius||Blurred shadow, 3 pixel radius|
The primary goal of the test was to increase clicks of buttons, counted using ‘many per session’ logic. We estimated a 3 week test duration, at a 3% baseline conversion rate and an expected 450,000 total sessions across the three variants.
|Variant||Experiment sessions||Calculated conversion rate|
After analysing performance in respect to other conversions and user attributes, we concluded variant 2, Blur shadow, was the winner.