Button

Documentation and examples for basic style on button element.

Variables

Name Type Value
$button-font-weight font-weight $font-weight-normal
$button-transition transition color $speed ease-in-out, background-color $speed ease-in-out, border-color $speed ease-in-out, box-shadow $speed ease-in-out
$button-padding-y padding .375rem
$button-padding-x padding .75rem
$button-font-size font-size 1rem
$button-line-height unitless $line-height
$button-border-radius radius $radius
$button-color color $text-color
$button-background color $gray-200
$button-border border $border-width solid transparent
$button-hover-background color darken($button-background, 10%)
$button-focus-box-shadow unitless 0 0 0 $outline-width darken($button-background, 20%)
$button-disabled-opacity opacity .57
$button-active-box-shadow unitless inset 0 3px 5px rgba($black, .125)

Normal button

<button type="button">Button</button>

Disabled button

<button type="button" disabled>Disabled</button>

Focused button

<button class="focus" type="button">Focused</button>

Active button

<button class="active" type="button">Activated</button>