Design for AI

Inset fill ring pop

Inset fill ring pop: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A round 48px outline icon button with a 2px violet #7c3aed border and an inline arrow-right icon in violet. On hover an inset box-shadow spreads 24px to fill the circle solid violet, the icon turns white and the button scales 1.06, 250ms. Active scales 0.96 on the darker #5b21b6. Focus 2px violet outline offset 4px.

Same shelf