Anel inset que estoura

Anel inset que estoura: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

inset-filloutlinecircleiconbox-shadow

CSS

.btn-150 {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  color: #7c3aed;
  background: transparent;
  border: 2px solid #7c3aed;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #7c3aed;
  transition: box-shadow .25s,color .2s,transform .2s
}
.btn-150:hover {
  box-shadow: inset 0 0 0 24px #7c3aed;
  color: #fff;
  transform: scale(1.06)
}
.btn-150:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 4px
}
.btn-150:active {
  transform: scale(.96);
  box-shadow: inset 0 0 0 24px #5b21b6;
  border-color: #5b21b6
}

HTML

<button class="btn-150" aria-label="Next"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>

Prompt

Um botão de ícone outline redondo de 48px com borda de 2px violeta #7c3aed e um ícone arrow-right inline em violeta. No hover um box-shadow inset se espalha 24px e preenche o círculo de violeta sólido, o ícone fica branco e o botão escala 1.06, 250ms. No active escala 0.96 sobre o mais escuro #5b21b6. Foco com outline violeta de 2px e offset de 4px.

Anel inset que estoura

Mesma prateleira