# Couro costurado (B 127)

Categoria: Botões  
Tags: skeuomorphic, embossed, rounded, stitched, warm  
Página: https://designforai.dev/pt/snippet/btn-127

## Prompt

Um botão com cara de couro: gradiente radial marrom (#8b4a1f no centro superior a #5b2d0f), borda de 1px #3d1c08, raio de 12px, texto serifado dourado claro #fde68a de 15px bold com sombra escura por baixo do texto, padding de 15px por 30px e uma linha de costura tracejada em dourado claro 5px para dentro da aresta (pseudo-elemento, raio de 8px). Sombra externa suave de 3px. No hover clareia 10%; no active escurece e ganha uma sombra inset. Foco com outline dourado de 2px e offset de 3px.

## HTML

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

## CSS

```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
}
```