Pressed dial

Pressed dial: a CSS button. Copy the rules, or the prompt that rebuilds it.

skeuomorphicembossedcircleiconring

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
}

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>

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.

Pressed dial

Same shelf