<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--dark-purple" href="#">Link with button class</a>
<button class="btn btn--dark-purple">Native button</button>
<br>
<h3 style="margin-top: 30px;">Secondary / Ghost button</h3>
<p>Used for less important call-to-actions, particularly when primary buttons are feature on the same component/page, or simply as an alternative styling, where applicable. These buttons appear as ghost (hollow) buttons with 4px solid border and text colour matching the colour of the border. This default styling can be applied by using the <b>.btn--white-ghost</b> class. See Variations for more button syling options.</p>
<a class="btn btn--white-ghost" href="#">Link</a>
<button class="btn btn--white-ghost">Button</button>
<br>
<h3 style="margin-top: 30px;">Variations / Modifiers</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--red etc</b> class</p>

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

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

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