Neobrutal oscuro

Neobrutal oscuro: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

CSS

.btn-049 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #18181b;
  background: #f4f4f5;
  border: 3px solid #f4f4f5;
  border-radius: 4px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #f97316;
  transition: transform .1s,box-shadow .1s
}
.btn-049:hover {
  box-shadow: 7px 7px 0 #f97316
}
.btn-049:focus-visible {
  outline: 3px solid #f97316;
  outline-offset: 4px
}
.btn-049:active {
  transform: translate(5px,5px);
  box-shadow: 0 0 0 #f97316
}

HTML

<div style="background:#18181b;padding:28px"><button class="btn-049">Enter</button></div>

Prompt

Un botón neobrutalista para fondos oscuros (#18181b): relleno y borde de 3px en blanco roto #f4f4f5, texto oscuro de 15px en negrita, radio de 4px, padding de 12px por 26px, sombra dura naranja #f97316 desplazada 5px 5px. Al pasar el cursor la sombra crece a 7px; en active se desliza sobre ella y la elimina. Outline de foco de 3px naranja.

Neobrutal oscuro

Misma estantería