Back to CSS Tags & Chips Sliding Border Pure CSS
Share
.ctc-slide { position: relative; display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; background: #15151d; color: #f0eeff; font: 600 13px/1 system-ui, sans-serif; text-decoration: none; isolation: isolate; }

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

.ctc-slide:hover { animation: ctc-slide-spin 2.4s linear infinite; }

@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-slide">
  <span>Premium</span>
</a>
Live preview Edit any tab — preview updates live Ready