Simple CSS Line Hover Animations for Links

From our sponsor: Raise all your marketing with Mailchimp Smarts.

Those little line animations are a best method to improve a style and include subtle micro-interactions to a site. Today I ‘d enjoy to share some super-simple concepts that are based upon CSS just, no JavaScript included.

Many impacts utilize a pseudo-element as line and some have a little SVG line animation, like this one:

<< a href=" https://tympanus.net/codrops/2021/02/10/simple-css-line-hover-animations-for-links/#" class=" link link-- herse">>.
<< period>> Register<.
<< svg class=" link __ graphic link __ graphic-- stroke link __ graphic-- arc" width=" 100%" height=" 18" viewBox=" 0 0 59 18">>.
<< course d=" M. 945.149 C12.3 16.142 43.573 22.572 58.785 10.842" pathLength=" 1"/>
<> .
<

The impact works by stimulating the stroke-dashoffset and we can utilize a very cool technique to "stabilize" the course length so that we do not need to trouble with the genuine length that we would require to do the SVG line animation.

 link-- herse {
font-family: freight-display-pro, serif;
font-size: 1.375 rapid eye movement;
font-weight: strong;
}

. link __ graphic-- arc {
top: 73%;
left: -23%;
}

. link __ graphic-- arc course {
stroke-dasharray: 1;
stroke-dashoffset: 1;
shift: stroke-dashoffset 0.4 s cubic-bezier( 0.7, 0, 0.3, 1);.
}

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

I hope you discover these little hover impacts beneficial!