Connect with us

Technology

Easy CSS Line Hover Animations for Hyperlinks | Codrops


A few easy & refined CSS-based line hover animations for hyperlinks.

From our sponsor: Elevate all of your advertising with Mailchimp Smarts.

These little line animations are an ideal method to improve a design and add refined micro-interactions to a web site. At this time I’d like to share some super-simple concepts which are based mostly on CSS solely, no JavaScript concerned.

Most results use a pseudo-element as line and a few have a bit of SVG line animation, like this one:

<a href="https://tympanus.internet/codrops/2021/02/10/simple-css-line-hover-animations-for-links/#" class="hyperlink link--herse">
	<span>Enroll</span>
	<svg class="link__graphic link__graphic--stroke link__graphic--arc" width="100%" top="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 impact works by animating the stroke-dashoffset and we are able to use a tremendous cool trick to “normalize” the trail size in order that we don’t need to hassle with the actual size that we would wish to do the SVG line animation.

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

.link__graphic--arc {
	prime: 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);
}

.hyperlink: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 discover these little hover results helpful!

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *