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!
The post Simple CSS Line Hover Animations for Links appeared first on Codrops.