Design for AIcorner-shape Squircle
corner-shape Squircle: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Ein violetter Button mit oklch, color-mix und corner-shape samt gestaffelten Fallbacks: Basis #7c3aed mit 16px Radius; wo oklch unterstützt wird, wird die Füllung oklch(55% .25 295) mit Hover- und Active-Stufen bei 49% und 43% Helligkeit; wo corner-shape unterstützt wird, werden die Ecken ein echtes Squircle (corner-shape:squircle) mit 24px Radius. Weißer 15px semibold Text, 14px mal 30px Padding, Active skaliert auf 0.98. Focus: 2px violette Outline mit 4px Offset.