Brushed metal
Brushed metal: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A brushed-metal skeuomorphic button: a four-stop grey gradient (#f3f4f6 to #d1d5db with a hard line at 50% then #c7cbd1 to #e5e7eb), 1px #9ca3af border, 7px radius, dark #1f2937 14px semibold text with a 1px white text highlight, 12px by 26px padding, inset top highlight and bottom shade plus a 2px drop shadow. Hover brightens the gradient. Active inverts the gradient, adds an inset 2px shadow and drops 1px. Focus 2px blue outline.