Links & Buttons

Links

This is a link

Example Code 
<a href="#?">This is a link</a>

Small Buttons


Example Code 
<p>
  <button class='btn-small'>Primary</button>
  <button class='btn-small btn-outline'>Outline</button>
  <button class='btn-small btn-secondary'>Secondary</button>
  <button class='btn-small btn-secondary-outline'>Secondary</button>
  <button class='btn-small btn-danger'>Danger</button>
  <button class='btn-small btn-danger-outline'>Danger</button>
  <button class='btn-small btn-success'>Success</button>
  <button class='btn-small btn-success-outline'>Success</button>
</p>

Normal Buttons


Example Code 
<p>
  <button>Primary</button>
  <button class='btn-outline'>Outline</button>
  <button class='btn-secondary'>Secondary</button>
  <button class='btn-secondary-outline'>Secondary</button>
  <button class='btn-danger'>Danger</button>
  <button class='btn-danger-outline'>Danger</button>
  <button class='btn-success'>Success</button>
  <button class='btn-success-outline'>Success</button>
</p>

Anchor Buttons

Primary Outline Secondary Secondary Danger Danger Success Success


Example Code 
<p>
  <a class='btn' href='#'>Primary</a>
  <a class='btn btn-outline' href='#'>Outline</a>
  <a class='btn btn-secondary' href='#'>Secondary</a>
  <a class='btn btn-secondary-outline' href='#'>Secondary</a>
  <a class='btn btn-danger' href='#'>Danger</a>
  <a class='btn btn-danger-outline' href='#'>Danger</a>
  <a class='btn btn-success' href='#'>Success</a>
  <a class='btn btn-success-outline' href='#'>Success</a>
</p>

Large Buttons


Example Code 
<p>
  <button class='btn-large'>Primary</button>
  <button class='btn-large btn-outline'>Outline</button>
  <button class='btn-large btn-secondary'>Secondary</button>
  <button class='btn-large btn-secondary-outline'>Secondary</button>
  <button class='btn-large btn-danger'>Danger</button>
  <button class='btn-large btn-danger-outline'>Danger</button>
  <button class='btn-large btn-success'>Success</button>
  <button class='btn-large btn-success-outline'>Success</button>
</p>

Extra Large Buttons


Example Code 
<p>
  <button class='btn-extra'>Primary</button>
  <button class='btn-extra btn-outline'>Outline</button>
  <button class='btn-extra btn-secondary'>Secondary</button>
  <button class='btn-extra btn-secondary-outline'>Secondary</button>
  <button class='btn-extra btn-danger'>Danger</button>
  <button class='btn-extra btn-danger-outline'>Danger</button>
  <button class='btn-extra btn-success'>Success</button>
  <button class='btn-extra btn-success-outline'>Success</button>
</p>