# Pressed dial (B 130)

Category: Buttons  
Tags: skeuomorphic, embossed, circle, icon, ring  
Page: https://designforai.dev/snippet/btn-130

## Prompt

A round 56px dial button with an off-centre radial highlight (white at 35% 30% to #dfe3e8), 1px #b8bec7 border, a 6px pale bezel ring plus a 1px darker ring outside it (both via box-shadow), a 3px drop shadow and an inline plus icon in #334155. Hover darkens the icon; active scales to 0.96 and swaps the drop shadow for an inset 3px shadow so it looks pressed in. Focus 2px blue outline offset 8px so it clears the bezel.

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