Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

Those little line animations are a perfect way to enhance a design and add subtle micro-interactions to a website. Today I’d love to share some super-simple ideas that are based on CSS only, no JavaScript involved.

Most effects use a pseudo-element as line and some have a little SVG line animation, like this one:

<a href="#" class="link link--herse">
	<span>Sign up</span>
	<svg class="link__graphic link__graphic--stroke link__graphic--arc" width="100%" height="18" viewBox="0 0 59 18">
		<path d="M.945.149C12.3 16.142 43.573 22.572 58.785 10.842" pathLength="1"/>
	</svg>
</a>

The effect works by animating the stroke-dashoffset and we can use a super cool trick to “normalize” the path length so that we don’t have to bother with the real length that we would need to do the SVG line animation.

.link--herse {
	font-family: freight-display-pro, serif;
	font-size: 1.375rem;
	font-weight: bold;
}

.link__graphic--arc {
	top: 73%;
	left: -23%;
}

.link__graphic--arc path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.4s cubic-bezier(0.7, 0, 0.3, 1);
}

.link:hover .link__graphic--arc path {
	stroke-dashoffset: 0;
	transition-timing-function: cubic-bezier(0.8, 1, 0.7, 1);
	transition-duration: 0.3s;
}

I hope you find these little hover effects useful!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.