# color-mix Tonskala (B 198)

Kategorie: Buttons  
Tags: modern-css, color-mix, rounded, single-hue, fallback  
Seite: https://designforai.dev/de/snippet/btn-198

## Prompt

Ein petrolfarbener #0d9488 Button (8px Radius, weißer 14px semibold Text, 12px mal 24px Padding), dessen Hover- und Active-Töne aus einer einzigen --c Custom Property per color-mix in oklch abgeleitet werden (12% und 24% Schwarz), plus ein Hover-Schatten, der die Markenfarbe zu 40% mit transparent mischt. Hart codierte #0f766e/#115e59 Fallbacks stehen außerhalb eines @supports Blocks, damit es sauber degradiert. Focus: 2px Outline in der Markenfarbe.

## HTML

```html
<button class="btn-198">Publish</button>
```

## CSS

```css
.btn-198{--c:#0d9488;font:600 14px/1 system-ui,sans-serif;color:#fff;background:var(--c);border:0;border-radius:8px;padding:12px 24px;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-198:hover{background:#0f766e}
.btn-198:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.btn-198:active{background:#115e59}
@supports (background:color-mix(in oklch,red,blue)){
.btn-198:hover{background:color-mix(in oklch,var(--c),black 12%);box-shadow:0 4px 12px -4px color-mix(in oklch,var(--c),transparent 40%)}
.btn-198:active{background:color-mix(in oklch,var(--c),black 24%)}
}
```