Buttons
Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Founders Grotesk Semibold font.
Markup: components/buttons/buttons.twig
<h3>SR20 BUTTONS!</h3>
<a class="btn btn--SR20-red" href="#">Link</a>
<button class="btn btn--SR20-red">Button</button>
<a class="btn btn--SR20-dark-blue" href="#">Link</a>
<button class="btn btn--SR20-dark-blue">Button</button>
<a class="btn btn--SR20-deep-violet" href="#">Link</a>
<button class="btn btn--SR20-deep-violet">Button</button>
<a class="btn btn--SR20-yellow" href="#">Link</a>
<button class="btn btn--SR20-yellow">Button</button>
<a class="btn btn--SR20-green" href="#">Link</a>
<button class="btn btn--SR20-green">Button</button>
<a class="btn btn--SR20-cyan-blue" href="#">Link</a>
<button class="btn btn--SR20-cyan-blue">Button</button>
<a class="btn btn--SR20-purple" href="#">Link</a>
<button class="btn btn--SR20-purple">Button</button>
<div style="background: black;padding: 20px;">
<a class="btn btn--SR20-white" href="#">Link</a>
<button class="btn btn--SR20-white ">Button</button>
</div>
Source:
_sr18-styleguide.scss, line 22