- Ghost Buttons in the WMS

OVERVIEW

Target audience:  Site Administrators, Site Managers, Site Editors

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

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

In this article:

There are two options for creating a ghost button on a page in the WMS.

Using the WYSIWYG Template feature:

On the page's edit screen, click the Templates icon on the WYSIWYG toolbar.
Select Button Link.
A button will appear with Sample Link Text. Double-click it to change the text label and add the destination URL.

Editing the HTML source code:

Create a text link in the WYSIWYG editor as you normally would.
Click Source in the text editor toolbar.
Find your link and add the "button--outline" class to the link:
```
<a class="button--outline" href="https://www.mcgill.ca/"> 
```
Click Save. The button will appear.

Note: The second option has less spacing around the button, so you'll want to use the first option for most use cases.

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.