--- name: button url: /button title: Button ---
A button is just an anchor tag with the button
class applied. A plain <button>
tag will also be styled as a button by default; you can turn this off by setting the $button-tag-selector
variable to false
in your Sass settings file.
Give buttons more semantic meaning with our built-in coloring classes.
Use these classes to change the size of a button.
Adding a class of disabled
will disable the hover state, and add a faded appearance.
Buttons can be converted to a hollow style with the hollow
class. All of the same coloring and sizing classes will work with it.
A button group is a series of buttons.
The same coloring and sizing classes for buttons can be used with button groups as well.
Individual buttons in the group can be styled with coloring classes, or the disabled
class.
The segmented
class will give buttons a hollow look. Add an is-active
class to an <li>
in the button group to fill it in.
A series of radio inputs can be transformed into a segmented button group.
Write a custom button class using our button mixins.
Buttons can be easily customized using our Sass variables.