Customizing Buttons

The following table lists the available variables for customization.

NameDefault valueDescription
$button-text $base-text The text color of the buttons.
$button-bg $base-bg The background of the buttons.
$button-border $base-border The border color of the buttons.
$button-gradient $base-gradient The background gradient of the buttons.
$button-hovered-text $hovered-text The text color of hovered buttons.
$button-hovered-bg $hovered-bg The background of hovered buttons.
$button-hovered-border $hovered-border The border color of hovered buttons.
$button-hovered-gradient $hovered-gradient The background gradient of hovered buttons.
$button-pressed-text $button-text The text color of pressed buttons.
$button-pressed-bg $button-bg The background color of pressed buttons.
$button-pressed-border $button-border The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow 0 3px 4px 0 rgba(0, 0, 0, .06) The shadow of focused buttons.