Design for AIcorner-shape squircle
corner-shape squircle: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A violet button using oklch, color-mix and corner-shape with layered fallbacks: base #7c3aed with 16px radius; where oklch is supported the fill becomes oklch(55% .25 295) with hover and active steps at 49% and 43% lightness; where corner-shape is supported the corners become a true squircle (corner-shape:squircle) with a 24px radius. White 15px semibold text, 14px by 30px padding, active scales 0.98. Focus 2px violet outline offset 4px.