Example

Primary buttons

Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button .btn .btn--dark-purple class

Link with button class

Secondary / Ghost button

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 .btn--white-ghost class. See Variations for more button syling options.

Link

Variations / Modifiers

Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button .btn .btn--red etc class

Link Ghost Button

Red variation .btn--red .btn--red-ghost

Link Ghost Button

Purple variation .btn--purple .btn--purple-ghost

Link Ghost Button

Royal-blue variation .btn--royal-blue .btn--royal-blue-ghost

Link Ghost Button

Mint-green variation .btn--mint-green .btn--mint-green-ghost

Link Ghost Button

White variation .btn--white .btn--white-ghost

Markup: components/buttons/buttons.twig
<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>
Source: _cr17-styleguide.scss, line 25