Simple CSS Line Hover Animations for Links

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

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.