Design for AI

Inset-Füllung Ring-Pop

Inset-Füllung Ring-Pop: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein runder 48px Outline-Icon-Button mit 2px violettem Rahmen #7c3aed und einem Inline-Pfeil-rechts-Icon in Violett. Beim Hover spreizt sich ein inset box-shadow 24px, füllt den Kreis komplett violett, das Icon wird weiß und der Button skaliert 1.06, 250ms. Active skaliert 0.96 auf dem dunkleren #5b21b6. Fokus 2px violette Outline mit 4px Offset.

Gleiches Regal