<h3>Primary buttons</h3>
<p>Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button <b>.btn .btn--dark-purple</b> class</p>


<a class="btn btn--red" href="#">Link</a>
<button class="btn btn--red">Button</button>
<p style="margin-top: 10px;">Red variation <i>.btn--red</i></p>

<a class="btn btn--deep-violet" href="#">Link</a>
<button class="btn btn--deep-violet">Button</button>
<p style="margin-top: 10px;">Deep violet variation <i>.btn--deep-violet</i></p>

<a class="btn btn--grey" href="#">Link</a>
<button class="btn btn--grey">Button</button>
<p style="margin-top: 10px;">Grey variation <i>.btn--grey</i></p>

<a class="btn btn--coral" href="#">Link</a>
<button class="btn btn--coral">Button</button>
<p style="margin-top: 10px;">Coral variation <i>.btn--coral</i></p>

<a class="btn btn--orange" href="#">Link</a>
<button class="btn btn--orange">Button</button>
<p style="margin-top: 10px;">Orange variation <i>.btn--orange</i></p>

<a class="btn btn--yellow" href="#">Link</a>
<button class="btn btn--yellow">Button</button>
<p style="margin-top: 10px;">Yellow variation <i>.btn--yellow</i></p>

<a class="btn btn--green" href="#">Link</a>
<button class="btn btn--green">Button</button>
<p style="margin-top: 10px;">Green variation <i>.btn--green</i></p>

<a class="btn btn--blue" href="#">Link</a>
<button class="btn btn--blue">Button</button>
<p style="margin-top: 10px;">Blue variation <i>.btn--blue</i></p>

<a class="btn btn--purple" href="#">Link</a>
<button class="btn btn--purple">Button</button>
<p style="margin-top: 10px;">Purple variation <i>.btn--purple</i></p>

<a class="btn btn--magenta" href="#">Link</a>
<button class="btn btn--magenta">Button</button>
<p style="margin-top: 10px;">Magenta variation <i>.btn--magenta</i></p>

<a class="btn btn--teal" href="#">Link</a>
<button class="btn btn--teal">Button</button>
<p style="margin-top: 10px;">Teal variation <i>.btn--teal</i></p>


{# LIGHT BUTTONS #}
<a class="btn btn--light-grey" href="#">Link</a>
<button class="btn btn--light-grey">Button</button>
<p style="margin-top: 10px;">Light grey variation <i>.btn--light-grey</i></p>

<a class="btn btn--light-coral" href="#">Link</a>
<button class="btn btn--light-coral">Button</button>
<p style="margin-top: 10px;">Light coral variation <i>.btn--light-coral</i></p>

<a class="btn btn--light-orange" href="#">Link</a>
<button class="btn btn--light-orange">Button</button>
<p style="margin-top: 10px;">Light orange variation <i>.btn--light-orange</i></p>

<a class="btn btn--light-yellow" href="#">Link</a>
<button class="btn btn--light-yellow">Button</button>
<p style="margin-top: 10px;">Light yellow variation <i>.btn--light-yellow</i></p>

<a class="btn btn--light-green" href="#">Link</a>
<button class="btn btn--light-green">Button</button>
<p style="margin-top: 10px;">Light green variation <i>.btn--light-green</i></p>

<a class="btn btn--light-blue" href="#">Link</a>
<button class="btn btn--light-blue">Button</button>
<p style="margin-top: 10px;">Light blue variation <i>.btn--light-blue</i></p>

<a class="btn btn--light-purple" href="#">Link</a>
<button class="btn btn--light-purple">Button</button>
<p style="margin-top: 10px;">Light purple variation <i>.btn--light-purple</i></p>

<a class="btn btn--light-magenta" href="#">Link</a>
<button class="btn btn--light-magenta">Button</button>
<p style="margin-top: 10px;">Light magenta variation <i>.btn--light-</i></p>

<a class="btn btn--light-teal" href="#">Link</a>
<button class="btn btn--light-teal">Button</button>
<p style="margin-top: 10px;">Light teal variation <i>.btn--light-teal</i></p>

{# DARK BUTTONS #}
<a class="btn btn--dark-grey" href="#">Link</a>
<button class="btn btn--dark-grey">Button</button>
<p style="margin-top: 10px;">Dark grey variation <i>.btn--dark-grey</i></p>

<a class="btn btn--dark-coral" href="#">Link</a>
<button class="btn btn--dark-coral">Button</button>
<p style="margin-top: 10px;">Dark coral variation <i>.btn--dark-coral</i></p>

<a class="btn btn--dark-orange" href="#">Link</a>
<button class="btn btn--dark-orange">Button</button>
<p style="margin-top: 10px;">Dark orange variation <i>.btn--dark-orange</i></p>

<a class="btn btn--dark-yellow" href="#">Link</a>
<button class="btn btn--dark-yellow">Button</button>
<p style="margin-top: 10px;">Dark yellow variation <i>.btn--dark-yellow</i></p>

<a class="btn btn--dark-green" href="#">Link</a>
<button class="btn btn--dark-green">Button</button>
<p style="margin-top: 10px;">Dark green variation <i>.btn--dark-green</i></p>

<a class="btn btn--dark-blue" href="#">Link</a>
<button class="btn btn--dark-blue">Button</button>
<p style="margin-top: 10px;">Dark blue variation <i>.btn--dark-blue</i></p>

<a class="btn btn--dark-magenta" href="#">Link</a>
<button class="btn btn--dark-magenta">Button</button>
<p style="margin-top: 10px;">Dark magenta variation <i>.btn--dark-</i></p>

<a class="btn btn--dark-purple" href="#">Link</a>
<button class="btn btn--dark-purple">Button</button>
<p style="margin-top: 10px;">Dark purple variation <i>.btn--dark-purple</i></p>

<a class="btn btn--dark-teal" href="#">Link</a>
<button class="btn btn--dark-teal">Button</button>
<p style="margin-top: 10px;">Dark teal variation <i>.btn--dark-teal</i></p>

<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
  <a class="btn btn--white" href="#">Link</a>
  <button class="btn btn--white">Button</button>
  <p style="margin-top: 10px;">White variation <i>.btn--white</i></p>
</div>