A Button is a stylised link that's visually very prominent and provides a strong call-to-action. Use Buttons when you want your audience to take an action, for example, 'Apply now', 'Register' or 'Download'.
Using either Buttons or Links
- Use Buttons for actions.
- Use Links to direct the audience to another page or resource.
- Learn more about using Links.
On this page
- When to use Buttons
- How to add a Button inside the WYSIWYG editor
- How to add a standalone button on a landing page
- Guidelines
When to use Buttons
Do
- Use Buttons for actions you want the audience to take.
- The Button label should be short and clear about the action you want the audience to take — limit of 50 characters. Try to limit the Button text to 2 to 4 words.
- Start your Button text with a verb, for example 'Apply now' or 'Book your ticket'.
- Button text should be sentence case and without a full stop.
- Align Buttons to the left.
- The content directly before the Button should give the audience the context for what action you want them to take when clicking the Button.
- Ensure that the Button text reflects where the Button link is directing the audience.
- Use a Button for a section with a single call to action.
- Define the call-to-action section with a line separator above and below.
- Check the Button display on mobile and set the Button to full-width if required.
Don't
- Don't use generic names as Button labels, for example 'Click here' or 'More information'.
- Don't include more than 1 primary Button in a section. Multiple Buttons may confuse the audience. If you're using more than 1 button, only 1 should use the primary styling and further buttons should use the Secondary or Tertiary styling.
How to add a Button inside the WYSIWYG editor
- In your WYSIWYG block, highlight the text that you want as your button label. Then select the Link icon.
-
Choose your Button styling from the Styling drop down:
- Primary
- Secondary
- Tertiary
- Alert.
The Dark option of the primary and secondary button should be used on white or light-coloured backgrounds. The Light option should only be used on dark backgrounds.
- You can use the optional toggle field to make your Button Full width.
- Expand the Advanced section.
- Leave the Title field blank. The CMS will create its own hover text/label.
- Enter your alt-text in the ARIA label field. This is mandatory. The alt-text must fully describe the action that will occur if a user selects the button.
- Do not add any text to the CSS classes, ID or Link relationship fields.
- Do not change the text in the Displayed text field. This is the text you highlighted as your button label in step 1.
- In Link URL field, search for your content link or managed link and select from the returned results. For a content link, enter the title of your content or enter the internal node pathway, for example, /node/1234. For external links enter the title of the managed link. Never add a direct URL to this field.
- Select the green insert field to add the Button to your page.
- After creating your button, you can use the Edit > Link properties to select the option to Open in a new window.
- Save your page to display the Button. Remember to check that the link is working.
How to add a standalone button on a landing page
A standalone button can be added on a landing page by going to the Layout screen, selecting Add block, Add content block and selecting Button. To complete the button set-up follow the same instructions as in 'How to add a Button inside the WYSIWYG editor'.
See buttons on nsw.gov.au
Visit Buttons to see this how this works on a live page.
You can also see live examples of how agencies have applied buttons to their content below:
Need any more help?
If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.