Buttons

The "button" format can be found in the "Formats" drop-down in the Formatting Tool Bar.

Formatting Tool Bar highlighted to show the Formats drop down menu.

Buttons should be used within content to provide call-to-action links. Button text should always contain actions and be clear and concise. Button text should ideally be three to five words, and should not be longer than six words. It should always be placed on a new line in the editor; a button should never be placed inline with copy.

A button indicates that the user can interact with that element. For that reason, the button format should be used exclusively on link text, never on plain text. This can make things much more confusing for users, especially with screen readers. Link guidelines also apply to buttons.

Buttons in the Editor #

The button format will not work on plain text. It must be applied to a  Link. 

  1. Once you have added a link in the editor, highlight the entire text of the link.
  2. Click the “Formats” drop-down menu in the Formatting Tool bar and select the “button” option.
  3. Click Save and Publish.
  1. Highlight the already linked text with the “button” format applied to it.
  2. Click the "Formats" drop-down in the Formatting Tool bar and select the highlighted “button” format. Note: If the “button” format is not already highlighted in the "Formats" drop-down, then the link you have selected does not have the button format applied to it.
  3. Click Save and Publish.

Accessibility #

  • Ensure buttons succinctly and accurately describe the content they are linking to.
  • Do not use all caps.
  • Do not include preceding articles (a, an, the, our).
  • Do not include punctuation (periods, commas, exclamation points, question marks, etc.)