Neobrutal escuro

Neobrutal escuro: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão neobrutalista para fundos escuros (#18181b): preenchimento e borda de 3px em off-white #f4f4f5, texto escuro de 15px bold, raio de 4px, padding de 12px por 26px, sombra dura laranja #f97316 deslocada 5px 5px. No hover a sombra cresce para 7px; no active desliza sobre ela e a remove. Outline de foco de 3px laranja.

Neobrutal escuro

Mesma prateleira