20 CSS Tags & Chips Designs 03 / 20
Sliding Border
A real @property-animated conic gradient traces around the chip on hover — true CSS angle animation, not the keyframes-on-position hack everyone else uses.
The code
<a href="#" class="ctc-slide"> <span>Premium</span> </a>
<a href="#" class="ctc-slide">
<span>Premium</span>
</a>.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;
}
}
@keyframes ctc-slide-spin { to { --ctc-angle: 360deg; } }
.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;
}
}
@keyframes ctc-slide-spin { to { --ctc-angle: 360deg; } }