Neo-brutal Gelb

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

brutalist neo-brutalisthard-shadowsquare

CSS

.btn-044 {
  font: 700 15px/1 system-ui,sans-serif;
  color: #000;
  background: #fde047;
  border: 3px solid #000;
  border-radius: 0;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #000;
  transition: transform .1s,box-shadow .1s
}
.btn-044:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 #000
}
.btn-044:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px
}
.btn-044:active {
  transform: translate(5px,5px);
  box-shadow: 0 0 0 #000
}

HTML

<button class="btn-044">Click me</button>

Prompt

Ein neo-brutalistischer Button: leuchtend gelbe #fde047 Füllung, 3px durchgehender schwarzer Rahmen, eckige Ecken, schwarzer Text 15px bold, 12px mal 24px Padding und ein harter schwarzer Versatzschatten 5px 5px ohne Blur. Hover schiebt den Button 2px nach oben links und der Schatten wächst auf 7px; active rutscht ihn 5px nach unten rechts auf den Schatten, sodass der Schatten verschwindet. Fokus-Outline 3px Blau.

Neo-brutal Gelb

Gleiches Regal