This content originally appeared on Codrops and was authored by Mary Lou
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.
This content originally appeared on Codrops and was authored by Mary Lou
Mary Lou | Sciencx (2021-02-10T13:59:33+00:00) Simple CSS Line Hover Animations for Links. Retrieved from https://www.scien.cx/2021/02/10/simple-css-line-hover-animations-for-links/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.