Halo-Ring

Halo-Ring: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

gradient-border animated pillconicglowproperty

CSS

@property --a103 {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg
}
.btn-103 {
  position: relative;
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #111;
  border: 0;
  border-radius: 999px;
  padding: 14px 32px;
  cursor: pointer;
  isolation: isolate
}
.btn-103::before,.btn-103::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(from var(--a103),#34d399,#3b82f6,#d946ef,#34d399);
  z-index: -2;
  animation: spin103 4s linear infinite
}
.btn-103::after {
  filter: blur(12px);
  opacity: .6;
  z-index: -3
}
.btn-103 span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #111;
  z-index: -1
}
.btn-103:hover::after {
  opacity: 1
}
.btn-103:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 5px
}
.btn-103:active {
  transform: translateY(1px)
}
@keyframes spin103 {
  to {
    --a103: 360deg
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-103, .btn-103 * { animation: none; transition: none; }
}

HTML

<button class="btn-103"><span></span>Generate</button>

Prompt

Ein schwarzer Pillen-Button mit rotierendem Conic-Rahmen (#34d399, #3b82f6, #d946ef) plus einer zweiten, 12px weichgezeichneten Kopie desselben Verlaufs dahinter als sanfter Halo bei 60% Opacity, beim Hover auf 100%. Rahmen 2px, Rotation 4s linear infinite via @property. Weißer Text 15px semibold, 14px mal 32px Padding. Ein leerer innerer span maskiert das Innere. Active rutscht 1px ab, Fokus 2px blaue Outline mit 5px Offset.

Halo-Ring

Gleiches Regal