# Gedrückter Drehknopf (B 130)

Kategorie: Buttons  
Tags: skeuomorphic, embossed, circle, icon, ring  
Seite: https://designforai.dev/de/snippet/btn-130

## Prompt

Ein runder 56px Drehknopf-Button mit außermittigem radialem Glanzpunkt (Weiß bei 35% 30% nach #dfe3e8), 1px Rahmen #b8bec7, ein 6px blasser Blendenring plus ein 1px dunklerer Ring außen (beide via box-shadow), ein 3px Drop-Shadow und ein Inline-Plus-Icon in #334155. Hover dunkelt das Icon; active skaliert auf 0.96 und tauscht den Drop-Shadow gegen einen 3px Inset-Schatten, sodass er eingedrückt wirkt. Fokus 2px blaue Outline mit 8px Offset, damit sie die Blende freilässt.

## HTML

```html
<button class="btn-130" aria-label="Increase"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg></button>
```

## CSS

```css
.btn-130 {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  color: #334155;
  background: radial-gradient(circle at 35% 30%,#fff,#dfe3e8);
  border: 1px solid #b8bec7;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff,0 3px 6px #0003,0 0 0 6px #eef0f3,0 0 0 7px #cfd4da;
  transition: box-shadow .15s,transform .15s,color .15s
}
.btn-130:hover {
  color: #0f172a
}
.btn-130:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 8px
}
.btn-130:active {
  transform: scale(.96);
  box-shadow: inset 0 3px 6px #0003,0 0 0 6px #eef0f3,0 0 0 7px #cfd4da
}
```