> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Teemaeditori – Painikkeet

> Määritä painikkeiden värit, reunan paksuus ja kulmien pyöristys ensisijaisille ja toissijaisille toimintopainikkeille koko verkkokaupassa.

<Frame caption="Teemaeditori > Painikkeet">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-buttons.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=0b977376d40ef02a87e71daf06fef8fe" alt="Painikkeiden asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-buttons.webp" />
</Frame>

Painikkeet-paneeli määrittää ensisijaisten (täytettyjen) ja toissijaisten (ääriviivallisten) toimintopainikkeiden ulkoasun koko verkkokaupassa — ostoskoriin lisäys, kassalle siirtyminen ja navigaatiopainikkeet perivät kaikki nämä tyylit.

## Värit

| Asetus           | Oletus    | Kuvaus                                                                |
| ---------------- | --------- | --------------------------------------------------------------------- |
| Tausta           | `#212121` | Ensisijaisten painikkeiden täyttöväri.                                |
| Teksti           | `#FFFFFF` | Ensisijaisten painikkeiden tekstin väri.                              |
| Ääriviivapainike | `#212121` | Toissijaisten (ääriviivallisten) painikkeiden reunan ja tekstin väri. |

## Reuna

| Asetus            | Tyyppi      | Oletus | Vaihteluväli | Kuvaus                                                                                                                       |
| ----------------- | ----------- | ------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| Paksuus           | Liukusäädin | 1 px   | 0–4 px       | Kaikkien painikkeiden reunan leveys. Arvo 0 poistaa reunan.                                                                  |
| Kulmien pyöristys | Liukusäädin | 6 px   | 0–40 px      | Kuinka pyöreät painikkeen kulmat ovat. Arvo 0 antaa terävät kulmat; suuret arvot tuottavat pilleriltä näyttäviä painikkeita. |

## CSS-muuttujat

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-button-background-color: #212121;
    --storefront-button-text-color: #FFFFFF;
    --storefront-button-outline-color: #212121;
    --storefront-button-border-width: 1px;
    --storefront-button-border-radius: 6px;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvät

<CardGroup cols={2}>
  <Card title="Syöttökentät" icon="input-pipe" href="/docs/fi/sales-channels/online-store/theme-editor/settings/inputs">
    Määritä lomakekenttien tyylit.
  </Card>

  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>
</CardGroup>