20 CSS Tags & Chips Designs 02 / 20
Magnetic Hover
On hover the chip text drifts toward the cursor edge via a CSS-only "magnet" trick — purely transition-based, no pointer math, no JS.
The code
<div class="ctc-mag"> <a href="#" class="ctc-mag-chip"><span>Hover me</span></a> <a href="#" class="ctc-mag-chip"><span>And me</span></a> <a href="#" class="ctc-mag-chip"><span>Try it</span></a> </div>
<div class="ctc-mag">
<a href="#" class="ctc-mag-chip"><span>Hover me</span></a>
<a href="#" class="ctc-mag-chip"><span>And me</span></a>
<a href="#" class="ctc-mag-chip"><span>Try it</span></a>
</div>.ctc-mag {
display: flex;
gap: 10px;
}
.ctc-mag-chip {
position: relative;
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #1f1f2e;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: #f0eeff;
font:
600 12px/1 system-ui,
sans-serif;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition:
border-color 0.2s,
background 0.2s;
}
.ctc-mag-chip span {
display: inline-block;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.ctc-mag-chip:hover {
background: #2a2a3e;
border-color: #7c6cff;
}
.ctc-mag-chip:hover span {
transform: translateX(3px) scale(1.05);
}
.ctc-mag-chip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(124, 108, 255, 0.35),
transparent 60%
);
opacity: 0;
transition: opacity 0.25s;
}
.ctc-mag-chip:hover::before {
opacity: 1;
} .ctc-mag {
display: flex;
gap: 10px;
}
.ctc-mag-chip {
position: relative;
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #1f1f2e;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
color: #f0eeff;
font:
600 12px/1 system-ui,
sans-serif;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition:
border-color 0.2s,
background 0.2s;
}
.ctc-mag-chip span {
display: inline-block;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
}
.ctc-mag-chip:hover {
background: #2a2a3e;
border-color: #7c6cff;
}
.ctc-mag-chip:hover span {
transform: translateX(3px) scale(1.05);
}
.ctc-mag-chip::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(124, 108, 255, 0.35),
transparent 60%
);
opacity: 0;
transition: opacity 0.25s;
}
.ctc-mag-chip:hover::before {
opacity: 1;
}