Design for AI

Leather stitch

Leather stitch: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A leather-look button: radial brown gradient (#8b4a1f centre-top to #5b2d0f), 1px #3d1c08 border, 12px radius, pale gold #fde68a 15px bold serif text with a dark underside text shadow, 15px by 30px padding, and a dashed pale-gold stitch line inset 5px from the edge (pseudo-element, 8px radius). Soft 3px drop shadow. Hover brightens 10%; active darkens and adds an inset shadow. Focus 2px gold outline offset 3px.

Same shelf