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. | |||