# Squircle corner-shape (B 200)

Categoria: Botões  
Tags: modern-css, corner-shape, oklch, squircle, fallback  
Página: https://designforai.dev/pt/snippet/btn-200

## Prompt

Um botão violeta usando oklch, color-mix e corner-shape com fallbacks em camadas: base #7c3aed com raio de 16px; onde oklch é suportado o preenchimento vira oklch(55% .25 295) com passos de hover e active em 49% e 43% de luminosidade; onde corner-shape é suportado os cantos viram um squircle de verdade (corner-shape:squircle) com raio de 24px. Texto branco 15px semibold, padding 14px por 30px, active escala 0.98. Focus com outline violeta de 2px e offset de 4px.

## HTML

```html
<button class="btn-200">Get access</button>
```

## CSS

```css
.btn-200{font:600 15px/1 system-ui,sans-serif;color:#fff;background:#7c3aed;border:0;border-radius:16px;padding:14px 30px;cursor:pointer;transition:background .15s,transform .15s}
.btn-200:hover{background:#6d28d9}
.btn-200:focus-visible{outline:2px solid #7c3aed;outline-offset:4px}
.btn-200:active{background:#5b21b6;transform:scale(.98)}
@supports (color:oklch(50% .1 200)){
.btn-200{background:oklch(55% .25 295)}
.btn-200:hover{background:oklch(49% .25 295)}
.btn-200:active{background:oklch(43% .24 295)}
}
@supports (corner-shape:squircle){
.btn-200{corner-shape:squircle;border-radius:24px}
}
```