Geprägtes Papier

Geprägtes Papier: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

skeuomorphicembossedrectangleletterpresslight

CSS

.btn-128 {
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b7280;
  text-shadow: 0 1px 0 #fff,0 -1px 0 #0002;
  background: #eeeeea;
  border: 0;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff,inset 0 -2px 0 #d6d6d0,0 1px 3px #0002;
  transition: color .15s,box-shadow .15s
}
.btn-128:hover {
  color: #374151
}
.btn-128:focus-visible {
  outline: 2px solid #6b7280;
  outline-offset: 3px
}
.btn-128:active {
  box-shadow: inset 0 2px 4px #0002,inset 0 -1px 0 #fff;
  color: #111827
}

HTML

<button class="btn-128">Print</button>

Prompt

Ein Button im Letterpress-Stil auf cremeweißem Papier #eeeeea: 6px Radius, Text in Versalien 14px semibold Grau #6b7280 mit 0.05em Tracking, der in die Oberfläche gedrückt wirkt (1px weißer Glanz darunter, zarter dunkler Schatten darüber), 13px mal 26px Padding, ein 1px weißer Inset-Glanz oben und eine 2px #d6d6d0 Lippe unten, zarter 3px Drop-Shadow. Hover dunkelt den Text auf #374151; active tauscht die Schatten, sodass die Fläche eingedrückt wirkt, und der Text geht auf #111827. Fokus 2px graue Outline.

Geprägtes Papier

Gleiches Regal