New to Kendo UI for Angular? Start a free 30-day trial

Customizing Buttons

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$button-border-width0px0px
Description
Width of border around buttons
$button-border-radius$border-radius2px
Description
Border radius of buttons
$button-padding-x$padding-x
Description
Horizontal padding of buttons
$button-padding-y8px8px
Description
Vertical padding of buttons
$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-bgnullnull
Description
The background of hovered buttons.
$button-hovered-textnullnull
Description
The text color of hovered buttons.
$button-hovered-bordernullnull
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-active-bgnullnull
Description
The background color of active buttons.
$button-active-textnullnull
Description
The text color of active buttons.
$button-active-bordernullnull
Description
The border color of active buttons.
$button-active-gradientnullnull
Description
The background gradient of active buttons.
$button-selected-bg$button-active-bgnull
Description
The background color of selected buttons.
$button-selected-text$button-active-textnull
Description
The text color of selected buttons.
$button-selected-border$button-active-bgnull
Description
The border color of selected buttons.
$button-selected-gradientnullnull
Description
The background gradient of selected buttons.
$button-focused-shadownullnull
Description
The shadow of focused buttons.

In this article

Not finding the help you need?