Buttons

Draw attention to a link by adding the class button.

<a href="" class="button">A button</a>

Styling

There are a few classes available to modify the appearance of your button.

• expand - Makes the button stretch the full width of its container
• radius - Gives the button rounded corners
• color - Choose accessible color combinations from the brand colors to customize the button.
  See Accessible Color and Contrast for more information.

HTML

<a href="" class="button expand">This button is expanded</a>
<a href="" class="button radius">This button has rounded edges</a></p>
<a href="" class="button bowman">This is a bowman field button</a></p>
<a href="" class="button blueridge radius">This button is blue ridge and has rounded edges</a></p>

Rendered HTML

This button is expanded

This button has rounded edges

This is a bowman field button

This button is blue ridge and has rounded edges

Adding an Icon

In addition to the styling above, you can also pair your link with an icon to make your button more visual. See the full set of available icons and learn more about how to use them.

<a href="" class="button expand blueridge">
    <span class="icon-paw"></span>
    Expanded Button
</a>
<a href="" class="button bowman">
    <span class="icon-paw"></span>
    Regular Button
</a>