Customizing Buttons

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-bg$base-bgmap-get( $theme, base-bg )
Description
The background of the buttons.
$button-text$base-textmap-get($theme, component-text)
Description
The text color of the buttons.
$button-border$button-bgmap-get( $theme, base-bg )
Description
The border color of the buttons.
$button-gradientnullnull
Description
The background gradient of the buttons.
$button-hovered-bgtrue-mix( $button-text, $button-bg, 12%)true-mix( $button-text, $button-bg, 12%)
Description
The background of hovered buttons.
$button-hovered-textnullnull
Description
The text color of hovered buttons.
$button-hovered-border$button-hovered-bgtrue-mix( $button-text, $button-bg, 12%)
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-pressed-bgtrue-mix( $button-text, $button-bg, 12%)true-mix( $button-text, $button-bg, 12%)
Description
The background color of pressed buttons.
$button-pressed-textnullnull
Description
The text color of pressed buttons.
$button-pressed-border$button-pressed-bgtrue-mix( $button-text, $button-bg, 12%)
Description
The border color of pressed buttons.
$button-pressed-gradientnullnull
Description
The background gradient of pressed buttons.
$button-focused-shadownullnull
Description
The shadow of focused buttons.