Ghost Buttons in the WMS


OVERVIEW

Target audience:  Site Administrators, Site Managers, Site Editors

Ghost buttons allow you style any link as a transparent outlined button.  

Title, text, and four buttons evenly spaced across a single line below

In this article:

Create a ghost button

  1. On the edit screen, click the Templates icon on the WYSIWYG toolbar.
  2. Select Button Link
  3. A button will appear with Sample Link Text. Double-click it to update the text label and destination URL. 

Alternate method using the source code editor:

  1. Create a text link in the WYSIWYG editor as you normally would
  2. Activate "source" view in the text editor toolbar 
  3. Find your link and add the "button--outline" class to the link:
    <a class="button--outline" href="https://www.mcgill.ca/"> 
  4. Save and the button will appear. 

Note that this second option has less spacing around the button, so you'll want to use the first (template) option for most use cases.  

Uses for ghost buttons 

Ghost buttons offer users options to click, while keeping your design visually light (as opposed to the heavier buttons in the Call to Action blocks). 

Suggested uses:  

  • Highlighting important links to allow visitors to scan the page and find useful information faster. 
  • Clearly differentiate between the importance of multiple links in a call-to-action block. 
  • Communicate different areas of a page with clear clickable links.   

Here is an article with more information about Ghost Buttons.

ADDITIONAL REFERENCES: