Design for AISquircle con corner-shape
Squircle con corner-shape: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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}
}
HTML
<button class="btn-200">Get access</button>Prompt
Un botón violeta que usa oklch, color-mix y corner-shape con fallbacks en capas: base #7c3aed con radio 16px; donde oklch tiene soporte el relleno pasa a oklch(55% .25 295) con pasos de hover y active al 49% y 43% de luminosidad; donde corner-shape tiene soporte las esquinas se convierten en un squircle real (corner-shape:squircle) con radio 24px. Texto blanco 15px semibold, padding 14px por 30px, active escala 0.98. Focus con outline violeta de 2px y offset 4px.