Design for AIGebürstetes Metall
Gebürstetes Metall: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Ein skeuomorpher Button aus gebürstetem Metall: ein grauer Verlauf mit vier Stops (#f3f4f6 nach #d1d5db mit harter Linie bei 50%, dann #c7cbd1 nach #e5e7eb), 1px Rahmen #9ca3af, 7px Radius, dunkler #1f2937 14px semibold Text mit 1px weißem Text-Highlight, 12px mal 26px Padding, innerer Glanz oben und Schatten unten plus 2px Drop-Shadow. Hover hellt den Verlauf auf. Active kehrt den Verlauf um, fügt einen 2px Inset-Schatten hinzu und rutscht 1px ab. Fokus 2px blaue Outline.