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.

Buttons must always link to something; another page on your GW Drupal website, a document, or an external website.
The text on the button should be descriptive, short, and actionable.
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"
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

Begin by creating a link using the link text and URL for your button
Next, highlight your link and use the Styles dropdown to select the size and color of the button
If you want to change the color or size of the button once it has been created, highlight your button then use the Remove Formatting button in the WYSIWYG toolbar to change it back to a standard hyperlink
To remove the or change button styles, use the Styles dropdown and deselect the button color and size you chose. This will reset the button to a simple text link
While the link is highlighted, use the Styles dropdown again to select the new size and color of the button

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.

Fall

Spring

Summer