Design for AICouro costurado
Couro costurado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
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.