From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
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!