Button Links

The Button link styles allow you to create buttons within the WYSIWYG text editor that serve as call-to-action links. Each Button has a rollover state on mouseover and has been developed to be accessible for users with disabilities and responsive on mobile devices.

Key Features

  • Versatile uses - can be placed on any Content Type with a WYSIWYG text editor
  • Multiple in-brand color options - several color options within GW's primary and secondary color palette are available
  • Multiple size options - available in a small, medium, and large options
  • Customizable link text - since you control the text, you control what the Button says

Best Practices

Button links should be used to highlight an important call-to-action visually and to encourage your visitors to take action.

  1. Buttons must always link to something; another page on your GW Drupal website, a document, or an external website.
  2. The text on the button should be descriptive, short, and actionable.
  3. Vague calls-to-action, such as "Click here", "Read More", "More Information", etc... should never be used as the link text on a button (or anywhere else on your site) because it is not descriptive enough to  pass digital accessibility compliance requirements. Users know that links and buttons can be clicked (or touched on mobile) to navigate to other content.
    • Examples of good copy to use on your Button:
      • "Schedule an Appointment" instead of "Click Here to Make an Appointment"
      • "Register Now" instead of "Register Now for Our Upcoming Information Session"
      • "View Costs" instead of "Learn More About Costs"
  4. Ensure that the size and style of the Button account for the other visuals on the page so as not to detract from other important content.

How to Add a Button 

  1. Use the Button button (​screen shot of the button button) in the WYSIWYG toolbar to add a button to your page
  2. Select a color, size, and width 
  3. Add your button text and link URL

Note: If your button is linking to an external site or file , use the Target tab to select New Window. In most cases, this will open the link in a new browser tab.

Button Examples

Here are examples of the available button options.

In line buttons

Buttons can placed in line with text.

Start the training module


Wide  Buttons

Selecting "Wide" can make buttons stretch to fit the width of the container they are in. This is an example of center-aligned, wide buttons in a three across template.

Buttons with Icons 

Font Awesome Icons can be easily added to buttons on either side of the button text using the Icons tab. Here are some examples.


Watch a Recorded Buttons Training