Design for AIMetal escovado
Metal escovado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.
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
Um botão esqueumórfico em metal escovado: gradiente cinza de quatro paradas (#f3f4f6 a #d1d5db com uma linha seca em 50%, depois #c7cbd1 a #e5e7eb), borda de 1px #9ca3af, raio de 7px, texto escuro #1f2937 de 14px semibold com um realce branco de 1px no texto, padding de 12px por 26px, realce interno no topo e sombra interna embaixo mais uma sombra externa de 2px. No hover o gradiente clareia. No active o gradiente inverte, ganha uma sombra inset de 2px e desce 1px. Foco com outline azul de 2px.