Search Colorado.edu

Buttons

Button color options include:

  • Blue
  • Gold
  • Black
  • Dark Gray
  • Light Gray
  • White

Examples

Normal Buttons

Button
<a href="#" class="button button-blue">Button</a>
Button
<a href="#" class="button button-gold">Button</a>
Button
<a href="#" class="button button-black">Button</a>
Button
<a href="#" class="button button-gray-dark">Button</a>
Button
<a href="#" class="button button-gray-light">Button</a>
Button
<a href="#" class="button button-white">Button</a>

Small Buttons

Button
<a href="#" class="button button-small button-blue">Button</a>
Button
<a href="#" class="button button-small button-gold">Button</a>
Button
<a href="#" class="button button-small button-black">Button</a>
Button
<a href="#" class="button button-small button-gray-dark">Button</a>
Button
<a href="#" class="button button-small button-gray-light">Button</a>
Button
<a href="#" class="button button-small button-white">Button</a>

Large Buttons

Button
<a href="#" class="button button-large button-blue">Button</a>
Button
<a href="#" class="button button-large button-gold">Button</a>
Button
<a href="#" class="button button-large button-black">Button</a>
Button
<a href="#" class="button button-large button-gray-dark">Button</a>
Button
<a href="#" class="button button-large button-gray-light">Button</a>
Button
<a href="#" class="button button-large button-white">Button</a>

Full Width Buttons

Button
<a href="#" class="button button-full button-blue">Button</a>
Button
<a href="#" class="button button-full button-gold">Button</a>
Button
<a href="#" class="button button-full button-black">Button</a>
Button
<a href="#" class="button button-full button-gray-dark">Button</a>
Button
<a href="#" class="button button-full button-gray-light">Button</a>
Button
<a href="#" class="button button-full button-white">Button</a>

Ghost Buttons

Ghost buttons are buttons with a semi-transparent background and need to be placed on an appropriate background for them to be viewable and accessible.

Button
<a href="#" class="button-ghost button-ghost-blue">Button</a>
Button
<a href="#" class="button-ghost button-ghost-gold">Button</a>
Button
<a href="#" class="button-ghost button-ghost-black">Button</a>
Button
<a href="#" class="button-ghost button-ghost-gray-dark">Button</a>
Button
<a href="#" class="button-ghost button-ghost-gray-light">Button</a>
Button
<a href="#" class="button-ghost button-ghost-white">Button</a>