Patterns

A responsive system to support designers, developers and teams to begin the build of products, apps and services based on a core collection of flexible consistent elements.

 

4 Buttons

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

4.1 Base styles & states

Button
:hover

Hover state.

Button
:active

Active state.

Button
.disabled

Disabled button. If you use <button> element, that is acceptable to add disabled attribute instead.

Button 
<a class="btn {$modifiers}">Button</a>
<button type="submit" class="btn {$modifiers}">Button</button>

4.2 Sizing

Fancy larger or smaller buttons? Add .btn--large, .btn--small, or .btn--mini for additional sizes.

.btn--large

Large button.

.btn--small

Small button.

.btn--mini

Mini button.

.btn--block

Block level button.

<button type="submit" class="btn btn--primary {$modifiers}">Button</button>
<button type="submit" class="btn {$modifiers}">Button</button>

4.3 Skins

Add an additonal modifier class to style button

Button
.btn--primary

Provides extra visual weight and identifies the primary action in a set of buttons.

Button
.btn--info

Used as an alternative to the default styles.

Button
.btn--success

Indicates a successful or positive action.

Button
.btn--warning

Indicates caution should be taken with this action.

Button
.btn--danger

Indicates a dangerous or potentially negative action.

Button
.btn--link

Deemphasize a button by making it look like a link while maintaining button behavior.

Button 
<a href="#" class="btn {$modifiers}">Button</a>
<button type="submit" class="btn {$modifiers}">Button</button>

4.4 Icon Buttons

Add an icon for added visual emphasis or clarity of purpose

.btn--large

Large.

.btn--small

Small

.btn--mini

Mini

.btn--block

Block

.btn--primary

Primary

.btn--info

Info

.btn--success

Success

.btn--warning

Warning

.btn--danger

Danger

<div>
	<a href="#" class="btn {$modifiers} btn--icon">Icon Button <span class="icon icon-angle-right"></span></a>
</div>

4.5 Button Groups

Use the .btn-group class on a <div> element surrounding several <a> elements with class .btn.

Button Link Button Link Button Link 
<div class="btn-group">
	<a href="#" class="btn">Button Link</a>
	<a class="btn">Button Link</a>
	<a class="btn">Button Link</a>
</div>