Button classes can be added to any anchor or button input type. Start by adding the class of button and then modify with optional classes. You should add either a helper class of 'solid' or 'outline' in order for the button to display correctly.

<a href="#" class="button">No Extra Classes</a>

Solid

Solid buttons are the most common type of button. Add the solid class with optional classes to control styles and extras.

<a href="#" class="button solid marian">Marian</a>
<a href="#" class="button solid gold">Gold</a>
<a href="#" class="button solid foliage">Foliage</a>
<a href="#" class="button solid foliage-accent">Foliage Accent</a>
<a href="#" class="button solid light-blue">Light Blue</a>
<a href="#" class="button solid blue">Blue</a>
<a href="#" class="button solid dark-blue">Dark Blue</a>

New 2023 Colors:

2023 Colors Mapped on Existing:

Start to Phase Out:

Outline

Outline buttons are also available. Add the outline class with optional classes to control styles and extras.

<a href="#" class="button outline marian">Marian</a>
<a href="#" class="button outline gold">Gold</a>
<a href="#" class="button outline foliage">Foliage</a>
<a href="#" class="button outline foliage-accent">Foliage Accent</a>
<a href="#" class="button outline light-blue">Light Blue</a>
<a href="#" class="button outline blue">Blue</a>
<a href="#" class="button outline dark-blue">Dark Blue</a>

New 2023 Colors:

2023 Colors Mapped on Existing:

Start to Phase Out:

Arrows

Extra arrow classes have been built to easily add arrows of any color to buttons. The matrix of combinations of colors and buttons is still under development, so the hover states may not work as expected until development is finalized.

<a href="#" class="button solid mint white-arrow">Mint</a>
<a href="#" class="button outline pink teal-arrow">Pink</a>
<a href="#" class="button outline light-blue gray-arrow">Light Blue</a>