Design for AICapas apiladas
Capas apiladas: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-055 {
font: 700 15px/1 system-ui,sans-serif;
color: #1e1b4b;
background: #c7d2fe;
border: 2px solid #1e1b4b;
border-radius: 6px;
padding: 12px 26px;
cursor: pointer;
box-shadow: 3px 3px 0 #1e1b4b,6px 6px 0 #a5b4fc,9px 9px 0 #1e1b4b;
transition: transform .12s,box-shadow .12s
}
.btn-055:hover {
transform: translate(-2px,-2px);
box-shadow: 5px 5px 0 #1e1b4b,10px 10px 0 #a5b4fc,15px 15px 0 #1e1b4b
}
.btn-055:focus-visible {
outline: 3px solid #6366f1;
outline-offset: 4px
}
.btn-055:active {
transform: translate(4px,4px);
box-shadow: 0 0 0 #1e1b4b,2px 2px 0 #a5b4fc,4px 4px 0 #1e1b4b
}
HTML
<button class="btn-055">Stack</button>Prompt
Un botón 3D de capas apiladas: relleno lavanda #c7d2fe, borde de 2px #1e1b4b, radio de 6px, texto oscuro de 15px en negrita, padding de 12px por 26px, y tres sombras duras desplazadas a 3px, 6px y 9px alternando oscuro/#a5b4fc/oscuro para que parezca una pila de tarjetas. Al pasar el cursor la pila se abre (5/10/15px); al pulsar se comprime (0/2/4px). Outline de foco de 3px índigo.