Buttons

For Large and Small Screens: Unclicked

This design applies to all buttons on both large and small screens.

white-text-on-teal-button

For Large and Small Screens: On Hover

When a user hovers over a button, the button color lightens, but a dark outline remains.

white-text-on-light-green-button

Usage and Best Practices

Buttons should be used when links are not sufficient or appropriate, in order to highlight a choice or signify an option. When buttons appear below text, they should be centered below it. When they appear beside text, they should be right aligned.

Accessibility Considerations

Buttons change to a lighter shade when hovered to expressly indicate that an item has been selected.

Code Example



    <a href="#" class="btn btn-primary button">View</a>