Links & Buttons

Links

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>
</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>
</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>
</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>
</p>