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

In this article