Customizing Buttons

The following table lists the available variables for customization.

Name Type Default value Computed value
$button-bg $secondary $secondary
Description
The background of the buttons.
$button-text contrast-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-gradient null null
Description
The background gradient of the buttons.
$button-hovered-bg try-darken( $button-bg, 7.5% ) try-darken( $button-bg, 7.5% )
Description
The background of hovered buttons.
$button-hovered-text contrast-wcag( $button-hovered-bg, $gray-900 ) contrast-wcag( $button-hovered-bg, $gray-900 )
Description
The text color of hovered buttons.
$button-hovered-border try-darken( $button-border, 10% ) try-darken( $button-border, 10% )
Description
The border color of hovered buttons.
$button-hovered-gradient null null
Description
The background gradient of hovered buttons.
$button-pressed-bg try-darken( $button-bg, 10% ) try-darken( $button-bg, 10% )
Description
The background color of pressed buttons.
$button-pressed-text contrast-wcag( $button-pressed-bg, $gray-900 ) contrast-wcag( $button-pressed-bg, $gray-900 )
Description
The text color of pressed buttons.
$button-pressed-border try-darken( $button-border, 12.5% ) try-darken( $button-border, 12.5% )
Description
The border color of pressed buttons.
$button-pressed-gradient null null
Description
The background gradient of pressed buttons.
$button-focused-shadow 0 0 0 3px rgba($button-border, .5) 0 0 0 3px rgba($button-border, .5)
Description
The shadow of focused buttons.

In this article