Customizing Buttons

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-border-width$btn-border-width
Description
Width of border around buttons
$button-border-radius$border-radius$border-radius
Description
Border radius of buttons
$button-padding-x$btn-padding-x
Description
Horizontal padding of buttons
$button-padding-y$btn-padding-y
Description
Vertical padding of buttons
$button-bg$secondary$secondary
Description
The background of the buttons.
$button-textcontrast-wcag( $button-bg, $gray-900 )contrast-wcag( $button-bg, $gray-900 )
Description
The text color of the buttons.
$button-border$button-bg$secondary
Description
The border color of the buttons.
$button-gradientnullnull
Description
The background gradient of the buttons.
$button-hovered-bgtry-darken( $button-bg, 7.5% )try-darken( $button-bg, 7.5% )
Description
The background of hovered buttons.
$button-hovered-textcontrast-wcag( $button-hovered-bg, $gray-900 )contrast-wcag( $button-hovered-bg, $gray-900 )
Description
The text color of hovered buttons.
$button-hovered-bordertry-darken( $button-border, 10% )try-darken( $button-border, 10% )
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-pressed-bgtry-darken( $button-bg, 10% )try-darken( $button-bg, 10% )
Description
The background color of pressed buttons.
$button-pressed-textcontrast-wcag( $button-pressed-bg, $gray-900 )contrast-wcag( $button-pressed-bg, $gray-900 )
Description
The text color of pressed buttons.
$button-pressed-bordertry-darken( $button-border, 12.5% )try-darken( $button-border, 12.5% )
Description
The border color of pressed buttons.
$button-pressed-gradientnullnull
Description
The background gradient of pressed buttons.
$button-focused-shadow0 0 0 3px rgba($button-border, .5)0 0 0 3px rgba($button-border, .5)
Description
The shadow of focused buttons.

In this article

Not finding the help you need?