Back to CSS Tags & Chips Aurora Outline Pure CSS
Share
.ctc-aurora { position: relative; display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; background: #0d0d16; color: #fff; font: 700 11px/1 ui-monospace, monospace; letter-spacing: 0.18em; text-decoration: none; isolation: isolate; --ctc-aurora-angle: 0deg; animation: ctc-aurora-rotate 6s linear infinite; }

.ctc-aurora::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--ctc-aurora-angle), #7c6cff, #ff6c8a, #2eb88a, #7c6cff); z-index: -1; }

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover, .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"], .ctc-life-chip[data-state="adding"] .ctc-life-icon { animation: none !important; }
  .ctc-life-chip[data-state="adding"] { transform: none; opacity: 1; }
}
<a href="#" class="ctc-aurora">
  <span>NEW</span>
</a>
Live preview Edit any tab — preview updates live Ready