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

# Buttons

Neben den Primär- und Sekundärbuttons werden in der Storefront an verschiedenen Stellen Buttons verwendet. In der Administration werden beispielsweise Light-Buttons verwendet. Die Farben der Buttons können hier angepasst werden:

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-133ce72fd712c808c0cb2c9411a3c0ee334cb61a%2Fdocs-de-config-typography-and-colors-buttons%20(1).png?alt=media" alt=""><figcaption></figcaption></figure>

Im Standard werden die Farben der Buttons anhand der border-color Farbe ermittelt. Dabei werden Farbton, Sättigung anhand der border-color mit einer fest definierten Helligkeit gesetzt. Das hat den Vorteil, dass die Buttons automatisch zu Deinem Farbstil passen.

```
// HSL Color $from sw-border-color
hsl(hue($sw-border-color), saturation($sw-border-color), 98%)
```