Dial pulsado

Dial pulsado: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón dial redondo de 56px con un brillo radial descentrado (blanco en 35% 30% a #dfe3e8), borde de 1px #b8bec7, un anillo de bisel pálido de 6px más otro anillo más oscuro de 1px por fuera (ambos con box-shadow), una sombra de 3px y un icono más inline en #334155. Al pasar el cursor el icono se oscurece; en active se escala a 0.96 y cambia la sombra por una inset de 3px para que parezca hundido. Foco con outline azul de 2px y offset de 8px para librar el bisel.

Dial pulsado

Misma estantería