Relleno inset con salto

Relleno inset con salto: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de icono redondo de 48px de contorno con borde de 2px violeta #7c3aed y un icono arrow-right inline en violeta. Al pasar el cursor un box-shadow inset se expande 24px para rellenar el círculo de violeta sólido, el icono se vuelve blanco y el botón se escala 1.06, 250ms. En active se escala 0.96 sobre el #5b21b6 más oscuro. Foco con outline violeta de 2px y offset de 4px.

Relleno inset con salto

Misma estantería