Last updated: Oct 30, 2015

Buttons are a nice way to draw attention an important link or call to action. Fuselage supplies a default style to its buttons, and makes it easy to customize them.

Simple Button

Merely supply the button class to an anchor element, and you have a button. Additionally, tack on the filled class to fill in the button and reverses the hover effect.

Output

Simple Filled

HTML

<a href="#" class="button">Simple</a>
<a href="#" class="button filled">Filled</a>

Button Colors

Utilize the branding color variables to add color to your buttons.

Output

Secondary Tertiary Info Success Warn Alert

HTML

<a href="#" class="button secondary filled">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>
<a href="#" class="button info">Info</a>
<a href="#" class="button success">Success</a>
<a href="#" class="button warn">Warn</a>
<a href="#" class="button alert">Alert</a>

Button Sizes

Tack on a class tiny, small, or large to adjust the size of your buttons. Buttons with the extended class will stretch to the full width of their container.

Output

Tiny Small Default Large Extended

HTML

<a href="#" class="button tiny">Tiny</a>
<a href="#" class="button small">Small</a>
<a href="#" class="button">Default</a>
<a href="#" class="button large">Large</a>
<a href="#" class="button extended">Extended</a>

Rounded & Disabled

Add the class rounded for a border radius, and the class or attribute disabled for disabled buttons.

Output

Rounded Disabled Disabled (Attribute)

HTML

<a href="#" class="button rounded">Rounded</a>
<a href="#" class="button disabled">Disabled</a>
<a href="#" class="button" disabled>Disabled (Attribute)</a>

Use the Mixin

Feel free to leverage the button mixin to meet your needs.

button($color, [$text, $reverse, $hover])
➜ Creates a custom button.

$color color value required

Border color and text color. Also the fill color when hovered.

$text color value (white)

Text color when hovered.

$reverse boolean (false)

Inverts button to be filled by default and transparent when hovered.

$hover color value (transparent)

Hover color when $reversed: true.

Here’s an example.

Output

Test Test2

SCSS

.test-button {
    @include button(#5AD);
}
.test-button2 {
    @include button(#CABB1E, $reverse: true);
}