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!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.