Design for AIMetal cepillado
Metal cepillado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.
CSS
.btn-126 {
font: 600 14px/1 system-ui,sans-serif;
color: #1f2937;
text-shadow: 0 1px 0 #fff;
background: linear-gradient(#f3f4f6,#d1d5db 50%,#c7cbd1 51%,#e5e7eb);
border: 1px solid #9ca3af;
border-radius: 7px;
padding: 12px 26px;
cursor: pointer;
box-shadow: inset 0 1px 0 #fff,inset 0 -1px 0 #9ca3af,0 2px 4px #0003;
transition: background .15s,box-shadow .15s
}
.btn-126:hover {
background: linear-gradient(#fff,#d9dce1 50%,#cfd3d9 51%,#eceef1)
}
.btn-126:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px
}
.btn-126:active {
background: linear-gradient(#c7cbd1,#d9dce1);
box-shadow: inset 0 2px 5px #0004;
transform: translateY(1px)
}
HTML
<button class="btn-126">Power</button>Prompt
Un botón esqueuomórfico de metal cepillado: degradado gris de cuatro paradas (#f3f4f6 a #d1d5db con una línea dura al 50% y luego #c7cbd1 a #e5e7eb), borde de 1px #9ca3af, radio de 7px, texto oscuro #1f2937 de 14px semibold con un brillo de texto blanco de 1px, padding de 12px por 26px, brillo inset superior y sombra inferior más una sombra de 2px. Al pasar el cursor el degradado se aclara. En active el degradado se invierte, añade una sombra inset de 2px y baja 1px. Foco con outline azul de 2px.