Skip to main content

hero banner

Buttons

Buttons represent actions the visitors can take with one click.

Usage, Best Practice, and Accessibility

Example

Small Button Regular Button Emphasis Button

Outline Button

Full Width Button

Give Button

White Outline Button

Designed for use on a maroon background

Example Button

Dark Gray Outline Button

Designed for use on a gold background

Example Button

Usage

Folwell button styles icon

  1. Highlight the text to be linked in the WYSIWYG.
  2. Click the link icon Folwell link icon in the WYSIWYG toolbar and enter the url to link the content.
  3. Change link to a button. With the link text highlighted, select one of the following button styles from the Styles dropdown menu in the WYSIWYG toolbar.

Note: It's currently not possible to add a button to a callout. This has been reported as a bug.

Best Practice

Bias Response Referral Network header with small button
  • Folwell uses maroon buttons with mouseover and pressed states.
  • Buttons should be labeled descriptively, keeping the text as short as possible.
  • A maroon button with a gold border may be used to draw attention to something special on your site; for example, an opportunity to "Give."
  • Buttons are offered in two sizes—small and regular—and both sizes have been designed to provide an ample touch target for mobile. The small button is best used in the site identity space in the header, for example.

Accessibility

  • The buttons use HTML for the text on the button, making them accessible.
  • The mouseover style helps indicate that the button is a link.