A Button is a clickable box with editable text used to make a link more prominent.

Create Accessible Buttons

Avoid buttons that say, "Read more", "See all", and "Click here" since this provides no context for where the link is taking a user. Instead, use more descriptive link text, such as "Register for TechExpo" or "View all Events".

Add a Button

(* = required field)

1. When editing a Page or Story, click Add Content Block and choose Button.

2. Enter an Administrative Title.

3. Enter a URL, where the button will link to.

  • Internal links: use the type ahead field to select a piece of content, or enter a relative path, such as /page-title
  • External link: https://example.com
  • Email addresses: mailto:email@duke.edu
  • Media items: sites/default/files/[filename.ext]
    1. First, upload the item through the Media Library.
    2. Then, edit the item, and click the filename link.
    3. The media item will open in a new browser window, with a URL like https://yoursite-content.cloud.duke.edu/sites/default/files/filename.pdf. Copy everything after "yoursite-content.duke.edu/" and use this value in your Button's URL field.

4. Add Link Text that will display on the button.

  • Make link text accessible by informing a user of where the link will take them. Read more about Link text accessibility via WebAIM.
  • Avoid "Read more", "See all", and "Click here" as button text.

5. Select Button Alignment to determine where the button will display within the content area. 

 

Drupal admin site showing the fields for adding a Button content block to a Page

 

Example Button