Buttons

Button text should be clear, concise and specific, and should always contain an action. For example:

• Log in
• Apply
• Enrol
• Order.

Make sure the user knows what they will initiate when they click the button.

As a general rule, buttons should be used sparingly. Don't use a button if a regular link will do.

Example:
Order transcript

Best practice tips

• Avoid using generic instructions like 'click here' or 'read more'.
• Always use sentence case for button link text.
• Shorter button text is best – use ampersands if necessary.
• Buttons should always initiate an action. They shouldn't be used in place of regular links.

There are several button styles you can use on UQ Standard websites.

Which style you use will depend on the purpose of your content and how many other buttons are already on the page.

To add a button to your page, you will first have to:

1. Highlight your link text and click the link icon in the WYSIWYG editor.
2. From the window, create your link in the 'Link info' tab.
3. Go to the 'Advanced' tab and specify the button style in the 'Stylesheet Classes' box.
4. Click 'OK'.

Read below for more information about button styles and stylesheet classes.

Primary buttons

Primary buttons are the default button style and should be used in most cases.

To make a primary button appear, type button into the 'Stylesheet Classes' box.

Apply now

Secondary buttons

Secondary buttons should be used when there are multiple buttons but only one primary action. Use the primary button for your primary action and secondary buttons for any remaining actions.

To make a secondary button appear, type button button--secondary into the 'Stylesheet Classes' box.

Order transcript

Tertiary buttons

Tertiary buttons should be used when there are multiple buttons but only one primary action. Use the primary button for your primary action and secondary and tertiary buttons for the remaining actions.

To make a tertiary button appear, type button button--tertiary into the 'Stylesheet Classes' box.

Download brochure

White buttons

White buttons should be used on dark backgrounds to ensure buttons are clearly visible.

Style class: button button--white

Enrol now

Outline buttons

Outline buttons are less prominent on the page. They can be useful when there are multiple buttons on a long page with no primary action. You can alter the outline colour by combining different style classes:

Style class: button button--outline

Outline button

Style class: button button--outline button--secondary

Secondary outline button

Style class: button button--outline button--tertiary

Tertiary outline button

Style class: button button--outline button--white

White outline button