Buttons

Buttons should be used within content or below the side navigation to provide call-to-action links. Buttons should always contain actions. The language should be clear and concise.

A button should always be placed on a new line in the Umbraco editor. A button should never be placed inline with copy. 

How to add the button format to a link in the Umbraco editor

  1. Once you have added a link in the Umbraco editor, highlight the entire text of the link.
  2. Click the “Formats” drop-down menu in the toolbar and select the “button” option.
  3. Click the “Save and publish” button.
  4. The link should now be a button in the browser window.
    You may need to use the “Preview” button or open the published web page in a new tab or window to see the button styles.

How to remove the button format to a link in the Umbraco editor

  1. Highlight the already linked text with the “button” format applied to it.
  2. Click the formats dropdown and select the highlighted “button” format. (Note: If the “button” format is not already highlighted in the formats dropdown, then the link you have selected does not have the button format applied to it.)
  3. Click “Save and publish”.
  4. The link should no longer look like a button.

Accessibility information

When adding buttons to content, they should clearly state what the button does.

Avoid using some of the following phrases for button text:

  • Continue
  • Learn more
  • Read more
  • View link

Examples of better phrases for button text:

  • Continue onto step 2
  • Read more about our research
  • Learn about our scholarships
  • View the alumni page