Customizing Buttons

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-border-width1px1px
Description
Width of border around buttons
$button-border-radius$border-radius2px
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-borderrgba( 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-borderrgba( 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-borderrgba( black, .08 )
Description
The border color of pressed buttons.
$button-pressed-gradientnonenone
Description
The background gradient of pressed buttons.
$button-focused-shadow0 3px 4px 0 rgba(0, 0, 0, .06)0 3px 4px 0 rgba(0, 0, 0, .06)
Description
The shadow of focused buttons.