Link With Button Style

Code Snippet Library

Code: Gray Button

<p><a class="Button" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Code: Blue Button

<p><a class="Button Button--primary" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Code: Black Button

<p><a class="Button Button--secondary" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Code: Green Button

<p><a class="Button Button--success" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Code: Orange Button

<p><a class="Button Button--warning" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Code: Red Button

<p><a class="Button Button--danger" href="linkurl" target="_blank" rel="noopener">Meaningful Link Text</a></p>

Quick Tips

The color of the button is defined by the class. For example, <a class="Button Button--danger" creates a red button. The first use of the word "button" creates a button, and the second "button" followed by the dashes and a button type creates a specific color.
In Edit mode, buttons can be selected and copied, then pasted into another Canvas location without needing to go into the HTML Editor.
The title of a button can also be edited directly from the Rich Content Editor, without having to go into the HTML Editor.

This style makes a link look like a button, but it depends on a Canvas class that may stop working. If it does, it will look like a regular link.
This style will also look like a regular link when viewed on a mobile device, so make sure the link text is meaningful and does not include the word "button."
Some institutions have a proprietary color theme Links to an external site.. If that's the case, the button colors may look different from the ones on this page. As long as the color contrast and link text are good, these are accessible and responsive.