Neo-brutal dunkel

Neo-brutal dunkel: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein neo-brutalistischer Button für dunkle Hintergründe (#18181b): cremeweiße #f4f4f5 Füllung und 3px Rahmen, dunkler Text 15px bold, 4px Radius, 12px mal 26px Padding, harter oranger #f97316 Versatzschatten 5px 5px. Hover vergrößert den Schatten auf 7px; active rutscht darauf und entfernt ihn. Fokus-Outline 3px Orange.

Neo-brutal dunkel

Gleiches Regal