Buttons - CGU Brand

There are a variety of button styles and colors and sizes to choose from.

Default

<a href="#" class="button">Default Button</a>

Inverse

<!-- good for use on dark backgrounds -->
<a href="#" class="button button--inverse">Inverse Button</a>

Solid

<a href="#" class="button button--solid">Solid Button</a>

Small

<a href="#" class="button button--small">Small Button</a>

Dark Colored Buttons

For use on light backgrounds.

<div class="u-clear">
  <div class="u-span-6">
    <p class="u-nudge"><a href="#" class="button button--red button--solid">Red</a></p>
    <p class="u-nudge"><a href="#" class="button button--black button--solid">Black</a></p>
    <p class="u-nudge"><a href="#" class="button button--dark-gray button--solid">Dark Gray</a></p>
  </div>
  <div class="u-span-6">
    <p class="u-nudge"><a href="#" class="button button--teal button--solid">Teal</a></p>
    <p class="u-nudge"><a href="#" class="button button--dark-teal button--solid">Dark Teal</a></p>
    <p class="u-nudge"><a href="#" class="button button--blue button--solid">Blue</a></p>
  </div>
</div>

Light Colored Buttons

For use on dark backgrounds.

<div class="u-clear">
  <div class="u-span-6">
    <p class="u-nudge"><a href="#" class="button button--white button--solid">White</a></p>
    <p class="u-nudge"><a href="#" class="button button--lightest-gray button--solid">Lightest Gray</a></p>  
    <p class="u-nudge"><a href="#" class="button button--lighter-gray button--solid">Lighter Gray</a></p>
    <p class="u-nudge"><a href="#" class="button button--light-gray button--solid">Light Gray</a></p>
    <p class="u-nudge"><a href="#" class="button button--tan button--solid">Tan</a></p>
  </div>
  <div class="u-span-6">  
    <p class="u-nudge"><a href="#" class="button button--tan-50 button--solid">Tan 50%</a></p>
    <p class="u-nudge"><a href="#" class="button button--tan-30 button--solid">Tan 30%</a></p>
    <p class="u-nudge"><a href="#" class="button button--light-teal button--solid">Light Teal</a></p>
    <p class="u-nudge"><a href="#" class="button button--light-yellow button--solid">Light Yellow</a></p>
    <p class="u-nudge"><a href="#" class="button button--light-green button--solid">Light Green</a></p>
  </div>
</div>

Styles, colors, and sizes can also be combined to further customize a button:

Solid + Red

<a href="#" class="button button--solid button--red">Solid Red Button</a>

Solid + Red + Small

<a href="#" class="button button--solid button--red button--small">Solid, Red, Small Button</a>