Design for AINeobrutal sombra de color
Neobrutal sombra de color: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-047 {
font: 700 15px/1 system-ui,sans-serif;
color: #1e1b4b;
background: #fff;
border: 2.5px solid #1e1b4b;
border-radius: 8px;
padding: 12px 24px;
cursor: pointer;
box-shadow: 4px 4px 0 #a5b4fc;
transition: transform .1s,box-shadow .1s,background .1s
}
.btn-047:hover {
box-shadow: 6px 6px 0 #6366f1;
background: #eef2ff
}
.btn-047:focus-visible {
outline: 3px solid #6366f1;
outline-offset: 3px
}
.btn-047:active {
transform: translate(4px,4px);
box-shadow: 0 0 0 #6366f1
}
HTML
<button class="btn-047">Download</button>Prompt
Un botón neobrutalista con sombra dura de color: relleno blanco, borde de 2.5px #1e1b4b, radio de 8px, texto #1e1b4b de 15px en negrita, padding de 12px por 24px, sombra desplazada 4px 4px en lavanda #a5b4fc. Al pasar el cursor la sombra crece a 6px en índigo #6366f1 y el relleno se tiñe de #eef2ff; en active se mueve 4px abajo a la derecha y pierde la sombra. Outline de foco de 3px índigo.