Design for AICuero cosido
Cuero cosido: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Un botón con aspecto de cuero: degradado radial marrón (#8b4a1f en el centro superior a #5b2d0f), borde de 1px #3d1c08, radio de 12px, texto serif dorado pálido #fde68a de 15px en negrita con una sombra de texto oscura por debajo, padding de 15px por 30px, y una línea de costura discontinua en dorado pálido a 5px del borde (pseudoelemento, radio de 8px). Sombra suave de 3px. Al pasar el cursor se aclara un 10%; en active se oscurece y añade una sombra inset. Foco con outline dorado de 2px y offset de 3px.