Customizing Buttons
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $button-border-width | 1px | 1px | |
Description Width of border around buttons | |||
| $button-border-radius | $border-radius | 2px | |
Description Border radius of buttons | |||
| $button-padding-x | $padding-x | ||
Description Horizontal padding of buttons | |||
| $button-padding-y | $padding-y | ||
Description Vertical padding of buttons | |||
| $button-text | $base-text | #656565 | |
Description The text color of the buttons. | |||
| $button-bg | $base-bg | #f6f6f6 | |
Description The background of the buttons. | |||
| $button-border | $base-border | rgba( black, .08 ) | |
Description The border color of the buttons. | |||
| $button-gradient | $base-gradient | $base-bg, darken( $base-bg, 2% ) | |
Description The background gradient of the buttons. | |||
| $button-hovered-text | $hovered-text | $base-text | |
Description The text color of hovered buttons. | |||
| $button-hovered-bg | $hovered-bg | #ededed | |
Description The background of hovered buttons. | |||
| $button-hovered-border | $hovered-border | rgba( black, .15 ) | |
Description The border color of hovered buttons. | |||
| $button-hovered-gradient | $hovered-gradient | $hovered-bg, darken( $hovered-bg, 2% ) | |
Description The background gradient of hovered buttons. | |||
| $button-pressed-text | $button-text | #656565 | |
Description The text color of pressed buttons. | |||
| $button-pressed-bg | $button-bg | #f6f6f6 | |
Description The background color of pressed buttons. | |||
| $button-pressed-border | $button-border | rgba( black, .08 ) | |
Description The border color of pressed buttons. | |||
| $button-pressed-gradient | none | none | |
Description The background gradient of pressed buttons. | |||
| $button-focused-shadow | 0 3px 4px 0 rgba(0, 0, 0, .06) | 0 3px 4px 0 rgba(0, 0, 0, .06) | |
Description The shadow of focused buttons. | |||
