Leder-Naht

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

skeuomorphicembossedroundedstitchedwarm

CSS

.btn-127 {
  font: 700 15px/1 Georgia,serif;
  color: #fde68a;
  text-shadow: 0 -1px 0 #000a;
  background: radial-gradient(ellipse at top,#8b4a1f,#5b2d0f);
  border: 1px solid #3d1c08;
  border-radius: 12px;
  padding: 15px 30px;
  cursor: pointer;
  box-shadow: inset 0 0 0 4px #5b2d0f,inset 0 0 0 5px transparent,inset 0 1px 0 6px #c58a5a88,0 3px 6px #0006;
  position: relative;
  transition: filter .15s
}
.btn-127::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dashed #fde68aaa;
  border-radius: 8px;
  pointer-events: none
}
.btn-127:hover {
  filter: brightness(1.1)
}
.btn-127:focus-visible {
  outline: 2px solid #fde68a;
  outline-offset: 3px
}
.btn-127:active {
  filter: brightness(.9);
  box-shadow: inset 0 0 0 4px #5b2d0f,inset 0 3px 8px #000a
}

HTML

<button class="btn-127">Sign</button>

Prompt

Ein Button im Leder-Look: radialer brauner Verlauf (#8b4a1f oben mittig nach #5b2d0f), 1px Rahmen #3d1c08, 12px Radius, blassgoldener #fde68a 15px bold Serifen-Text mit dunklem Textschatten nach unten, 15px mal 30px Padding und eine gestrichelte blassgoldene Nahtlinie 5px von der Kante eingerückt (Pseudo-Element, 8px Radius). Weicher 3px Drop-Shadow. Hover hellt 10% auf; active dunkelt und fügt einen Inset-Schatten hinzu. Fokus 2px goldene Outline mit 3px Offset.

Leder-Naht

Gleiches Regal