Buttons

The button classes can be used with <a>, <button>, or <input> elements to provide
standardized styling regardless of element used.

As a best practice, we highly recommend using the <button> or <a> elements whenever
possible to ensure matching cross-browser rendering.

See variants section below
for style variations of color, border and disabled states.

Button

<button class="button">
	Button
</button>

Button Input

<input type="submit" class="button" value="Button Input">

Variants

Colors

<p>
	<button class="button button--blue">
		Button (Blue)
	</button></p>
<p>
	<button class="button button--bright-blue">
		Button (Bright Blue)
	</button></p>
<p>
	<button class="button button--orange">
		Button (Orange)
	</button></p>

Border

The border variant can NOT be applied to <input> elements.

Button Link 

<p>
	<button class="button button--blue button--border">
		Button
	</button></p>
<p>
	<a href="#" class="button button--orange button--border" role="button">
		Button Link
	</a></p>

Compact

For buttons that need to fit in tight places use the .button--compact class.

Button Link 

<p>
	<button class="button button--blue button--compact">
		Button
	</button></p>
<p>
	<a href="#" class="button button--orange button--border button--compact" role="button">
		Button Link
	</a></p>

Disabled

Button Link 

<p>
	<button class="button button--blue" disabled>
		Button
	</button></p>
<p>
	<input type="submit" class="button button--bright-blue" value="Button Input" disabled></p>
<p>
	<a href="#" class="button button--orange button--disabled" role="button">
		Button Link
	</a></p>

With Icon

Button with an icon to the right of the text. Add an empty span with the icon class after the text. Also, use the data-grunticon-embed attribute on that span so that the proper color can be applied.

Button Link

Loading 

<p>
	<button class="button button--blue">
		Button <span class="icon-text-arrow-right" data-grunticon-embed></span>
	</button></p>
<p>
	<a href="#" class="button button--orange" role="button">
		Button Link <span class="icon-text-arrow-right" data-grunticon-embed></span>
	</a></p>
<p>
	<a href="#" class="button button--blue button--loading" role="button">
		Loading <span class="icon-circle-spin" data-grunticon-embed></span>
	</a></p>