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.


Simple Filled

<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.


Secondary Tertiary Info Success Warn Alert

<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.


Tiny Small Default Large Extended

<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.


Rounded Disabled Disabled (Attribute)

<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.


Test Test2

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