Tinte flach

Tinte flach: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

solid flatrectanglesubtle-lift

CSS

.btn-001 {
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 6px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .15s,transform .15s
}
.btn-001:hover {
  background: #1f2937
}
.btn-001:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px
}
.btn-001:active {
  transform: translateY(1px);
  background: #000
}

HTML

<button class="btn-001">Get started</button>

Prompt

Ein flacher, einfarbiger Button, Hintergrund #111827, weißer Text 15px semibold, 6px Radius, 12px mal 22px Padding, ohne Rahmen oder Schatten. Beim Hover hellt sich der Hintergrund auf #1f2937 auf; bei active rutscht er 1px nach unten und dunkelt auf #000 ab. Der Fokusring ist eine 2px Outline in #111827 mit 3px Offset.

Tinte flach

Gleiches Regal