The classes belonging to the button component can be used to style both the <button> and <a> element.
Button
Available states
Hover, focus and active
Disabled
Available modifiers
Colors
Outline version (available in all colors)
Sizes
Available local variables
Default button (ui colors)
$button-color
$button-background-color
$button-hover-color
$button-hover-background-color
$button-focus-box-shadow
$button-active-color
$button-active-background-color
$button-disabled-color
$button-disabled-background-color
Call to action
$button-call-to-action-color
$button-call-to-action-background-color
$button-call-to-action-hover-color
$button-call-to-action-hover-background-color
$button-call-to-action-focus-box-shadow
$button-call-to-action-active-color
$button-call-to-action-active-background-color
$button-call-to-action-disabled-color
$button-call-to-action-disabled-background-color
Primary
$button-primary-color
$button-primary-background-color
$button-primary-hover-color
$button-primary-hover-background-color
$button-primary-focus-box-shadow
$button-primary-active-color
$button-primary-active-background-color
$button-primary-disabled-color
$button-primary-disabled-background-color
Secondary
$button-secondary-color: red;
$button-secondary-background-color
$button-secondary-hover-color
$button-secondary-hover-background-color
$button-secondary-focus-box-shadow
$button-secondary-active-color
$button-secondary-active-background-color
$button-secondary-disabled-color
$button-secondary-disabled-background-color
Outline
$button-outline-border-width