Customizing Buttons

The following table lists the available variables for customization.

Name Default value Description
$button-bg $base-bg The background of the buttons.
$button-text $base-text The text color of the buttons.
$button-border $button-bg The border color of the buttons.
$button-gradient null The background gradient of the buttons.
$button-hovered-bg true-mix( $button-text, $button-bg, 12%) The background of hovered buttons.
$button-hovered-text null The text color of hovered buttons.
$button-hovered-border $button-hovered-bg The border color of hovered buttons.
$button-hovered-gradient null The background gradient of hovered buttons.
$button-pressed-bg true-mix( $button-text, $button-bg, 12%) The background color of pressed buttons.
$button-pressed-text null The text color of pressed buttons.
$button-pressed-border $button-pressed-bg The border color of pressed buttons.
$button-pressed-gradient null The background gradient of pressed buttons.
$button-focused-shadow null The shadow of focused buttons.

In this article