Design for AICandy Press
Candy Press: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
CSS
.btn-051 {
font: 700 16px/1 system-ui,sans-serif;
color: #fff;
background: #22c55e;
border: 0;
border-radius: 12px;
padding: 14px 32px;
cursor: pointer;
box-shadow: 0 6px 0 #15803d,0 8px 12px rgba(0,0,0,.2);
transition: transform .08s,box-shadow .08s
}
.btn-051:hover {
background: #26d162
}
.btn-051:focus-visible {
outline: 3px solid #15803d;
outline-offset: 3px
}
.btn-051:active {
transform: translateY(6px);
box-shadow: 0 0 0 #15803d,0 1px 3px rgba(0,0,0,.2)
}
HTML
<button class="btn-051">Play</button>Prompt
Ein 3D-Button im Candy-Stil: grüne #22c55e Oberseite, weißer Text 16px bold, 12px Radius, 14px mal 32px Padding, mit einer massiven 6px dunkleren grünen #15803d Unterkante (box-shadow 0 6px 0) plus weichem Drop-Shadow. Hover hellt leicht auf; beim Drücken bewegt sich der Button 6px nach unten und die Kante klappt auf null zusammen. Fokus-Outline 3px Dunkelgrün.