Documentation ➜ Buttons
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.
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.
Utilize the branding color variables to add color to your buttons.
Tack on a class
large to adjust the size of your buttons. Buttons with the
extended class will stretch to the full width of their container.
Rounded & Disabled
Add the class
rounded for a border radius, and the class or attribute
disabled for disabled buttons.
Use the Mixin
Feel free to leverage the button mixin to meet your needs.
- $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.