> For the complete documentation index, see [llms.txt](https://docs.kaliumtheme.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kaliumtheme.com/styling/buttons.md).

# Buttons

One place to set how every button on the site looks.

Globally manage the appearance of buttons across your site to have a consistency in design. Customize the button styles under **Appearance** -> **Customize** -> **Styling** -> **Buttons**. Each button style can be set for three states:

* Normal
* Hover
* Active

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-14ab6403b2024cf079948e72c05610ac2b07d7ee%2Fbuttons.jpg?alt=media" alt=""><figcaption></figcaption></figure>

This means that you can define how buttons look by default, how they change when hovered over, and their appearance when actively clicked or pressed. All options related to colors apply to these three states.

***

### Color

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-f00a60c4079ea4ea9705e9461531043d7e10cd0a%2Fbutton-color.jpg?alt=media" alt="" width="340"><figcaption></figcaption></figure>

#### Text

Set the color of the text on your buttons. Make sure there is enough contrast with the background color to help users with different abilities read the text easily.

#### Background

Choose the background color for your buttons. Ensure it contrasts well with the text color to make it easy to see.

***

### Box Shadow

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-782031e18438a7869a698138e08438cfd629fb74%2Fbutton-box-shadow.jpg?alt=media" alt="" width="340"><figcaption></figcaption></figure>

#### Box Shadow

Add a shadow effect to your buttons. You can adjust the shadow’s color, blur, spread, and position to give the button a 3D look and make it stand out.

***

### Padding & Border

<figure><img src="https://2905187046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1O25QgF7NUwiK2Ek4ro8%2Fuploads%2Fgit-blob-099952642bb1542b80efb975fbcc65c1c65105fb%2Fbutton-padding-border.jpg?alt=media" alt="" width="343"><figcaption></figcaption></figure>

#### Padding

Adjust the space around the button text to change its size and spacing. This setting applies to all buttons and doesn’t change with different states. To set a different value per side, click the link icon (🔗) to unlink the four values.

#### Border Radius

Set how rounded the corners of the buttons are. This lets you create buttons with either square or rounded edges. It unlinks per corner the same way.

#### Border

Customize the border color, style, and width of your buttons. One width, style and color applies to all four sides.

**Border Hover** and **Border Active** set the border color for those two states. They appear only once **Border** has a value, so give the border a width first.