# Gebürstetes Metall (B 126)

Kategorie: Buttons  
Tags: skeuomorphic, embossed, rectangle, metallic, gradient  
Seite: https://designforai.dev/de/snippet/btn-126

## 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.

## HTML

```html
<button class="btn-126">Power</button>
```

## CSS

```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)
}
```