20 CSS Link Hover Effect Designs 16 / 20
Magnetic Pull
Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath.
The code
<a href="#" class="cle-mag">Open dashboard →</a>
<a href="#" class="cle-mag">Open dashboard →</a>.cle-mag {
position: relative;
display: inline-block;
padding-bottom: 4px;
color: #c4b5fd;
font:
600 15px/1.2 system-ui,
sans-serif;
text-decoration: none;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.25s;
}
.cle-mag::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: #a78bfa;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-mag:hover,
.cle-mag:focus-visible {
transform: translateX(6px);
color: #fff;
}
.cle-mag:hover::after,
.cle-mag:focus-visible::after {
transform: scaleX(1);
} .cle-mag {
position: relative;
display: inline-block;
padding-bottom: 4px;
color: #c4b5fd;
font:
600 15px/1.2 system-ui,
sans-serif;
text-decoration: none;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
color 0.25s;
}
.cle-mag::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: #a78bfa;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.cle-mag:hover,
.cle-mag:focus-visible {
transform: translateX(6px);
color: #fff;
}
.cle-mag:hover::after,
.cle-mag:focus-visible::after {
transform: scaleX(1);
}