Buttons

Buttons represent actions the visitors can take with one click.

Usage, Best Practice, and Accessibility

Examples

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

  1. Highlight the text to be linked in the WYSIWYG and click the link icon to enter the URL you would like linked.
     

    Highlighted text stating "Hyperlink Text" and a highlighted URL Link icon.
    Highlighted text stating "Hyperlink Text" and a dialogue window displaying additional options.

  2. Click on your newly linked text to display additional link options and select the Link Properties icon.

    Highlighted text stating "Hyperlink Text" and a small toolbar displaying icons.

  3. In the Link Properties window, select the type of button you would like to turn your linked text into by toggling the icon to "On" (gray = off and green = on"). 

    Dialogue window displaying Link Properties

    Note: examples of the different button types are listed at the top of this page.

    A newly created button should now appear in the editor window:

    WYSIWYG (CKEditor 5) editor window displaying newly created button.
Best Practice
  • 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.