Design for AIClay Pfirsich
Clay Pfirsich: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-132 {
font: 700 15px/1 system-ui,sans-serif;
color: #7c2d12;
background: #fdba74;
border: 0;
border-radius: 20px;
padding: 15px 30px;
cursor: pointer;
box-shadow: inset -5px -5px 10px #f59e4d,inset 5px 5px 10px #ffd9b0,6px 6px 16px #fdba7466;
transition: transform .2s,box-shadow .2s,background .2s
}
.btn-132:hover {
background: #fdc58a;
transform: translateY(-2px)
}
.btn-132:focus-visible {
outline: 3px solid #7c2d12;
outline-offset: 3px
}
.btn-132:active {
transform: scale(.97);
box-shadow: inset -2px -2px 5px #f59e4d,inset 2px 2px 5px #ffd9b0,2px 2px 6px #fdba7466
}
HTML
<button class="btn-132">Order</button>Prompt
Ein pfirsichfarbener Clay-Button #fdba74 mit dunkelbraunem #7c2d12 Text 15px bold, 20px Radius, 15px mal 30px Padding. Die Plusterung kommt von einem dunklen Inset-Schatten unten rechts (#f59e4d) und einem hellen Inset-Schatten oben links (#ffd9b0), 10px Blur, plus einem Pfirsich-Drop-Shadow (6px 6px 16px). Hover hellt auf #fdc58a und hebt 2px; active skaliert 0.97 und flacht die Insets ab. Fokus 3px braune Outline.