Buttons

<!-- Default -->
<h2 class="label">Regular Button</h2>

<p class="csu-button"><a href="javascript:void(0)">Regular Button</a></p>

<button class="csu-button"><a href="javascript:void(0)">Regular Button</a></button>

<!-- Wide Button -->
<h2 class="label">Wide Button</h2>

<p class="csu-button csu-btn-wide"><a href="javascript:void(0)">Wide Button</a></p>

<button class="csu-button csu-btn-wide"><a href="javascript:void(0)">Wide Button</a></button>

<!-- Large Button -->
<h2 class="label">Large Button</h2>

<p class="csu-button csu-btn-large"><a href="javascript:void(0)">Large Button</a></p>

<button class="csu-button csu-btn-large"><a href="javascript:void(0)">Large Button</a></button>

<!-- Full Button -->
<h2 class="label">Full Button</h2>

<p class="csu-button csu-btn-full"><a href="javascript:void(0)">Full Button</a></p>

<button class="csu-button csu-btn-full"><a href="javascript:void(0)">Full Button</a></button>

<!-- Group -->
<h2 class="label">Grouped Buttons</h2>

<div class="button-group">
    <p class="csu-button"><a href="javascript:void(0)">Group Button</a></p>
    <p class="csu-button"><a href="javascript:void(0)">Group Button</a></p>
    <p class="csu-button"><a href="javascript:void(0)">Group Button</a></p>
    <p class="csu-button"><a href="javascript:void(0)">Group Button</a></p>
    <p class="csu-button"><a href="javascript:void(0)">Group Button</a></p>
</div>

<div class="button-group">
    <button class="csu-button"><a href="javascript:void(0)">Group Button</a></button>
    <button class="csu-button"><a href="javascript:void(0)">Group Button</a></button>
    <button class="csu-button"><a href="javascript:void(0)">Group Button</a></button>
    <button class="csu-button"><a href="javascript:void(0)">Group Button</a></button>
    <button class="csu-button"><a href="javascript:void(0)">Group Button</a></button>
</div>

<!-- Group -->
<h2 class="label">Coloured Buttons</h2>

<div class="button-group">
    <p class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></p>
    <p class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></p>
    <p class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></p>
    <p class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></p>
    <p class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></p>
</div>

<div class="button-group">
    <button class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></button>
    <button class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></button>
    <button class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></button>
    <button class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></button>
    <button class="csu-button csu-green"><a href="javascript:void(0)">Colour Button</a></button>
</div>

<!-- Default -->
<h2 class="label">{{ text }}</h2>

<p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>

<button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>

<!-- Wide Button -->
<h2 class="label">{{ text }}</h2>

<p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>

<button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>

<!-- Large Button -->
<h2 class="label">{{ text }}</h2>

<p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>

<button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>

<!-- Full Button -->
<h2 class="label">{{ text }}</h2>

<p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>

<button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>

<!-- Group -->
<h2 class="label">{{ modifier }}</h2>

<div class="button-group">
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
</div>

<div class="button-group">
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
</div>

<!-- Group -->
<h2 class="label">{{ modifier }}</h2>

<div class="button-group">
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
  <p class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></p>
</div>

<div class="button-group">
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
  <button class="{{ class }}"><a href="javascript:void(0)">{{ text }}</a></button>
</div>

The csu-button class can be applied to both the <button> and <p> tags and can be coloured using class modifiers. Hover states are done using box-shadows.