Design for AI

Botão giratório pressionado

Botão giratório pressionado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão redondo de 56px estilo dial com um realce radial fora do centro (branco em 35% 30% até #dfe3e8), borda de 1px #b8bec7, um anel de moldura claro de 6px mais um anel mais escuro de 1px por fora (ambos via box-shadow), uma sombra externa de 3px e um ícone de mais inline em #334155. No hover o ícone escurece; no active escala para 0.96 e troca a sombra externa por uma inset de 3px, como se estivesse afundado. Foco com outline azul de 2px e offset de 8px para passar por fora da moldura.

Mesma prateleira