Design for AIPulsación caramelo
Pulsación caramelo: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Un botón 3D estilo caramelo: cara superior verde #22c55e, texto blanco de 16px en negrita, radio de 12px, padding de 14px por 32px, con un canto inferior sólido de 6px en verde más oscuro #15803d (box-shadow 0 6px 0) más una sombra suave. Al pasar el cursor se aclara ligeramente; al pulsar el botón baja 6px y el canto se reduce a cero. Outline de foco de 3px verde oscuro.