Webflow Underline Animation Tutorial | Webflow Text Hover Effects
In this video, I'll show how you how to create an animated underline effect on hover in Webflow. I'll show you two different options, a "no code" version and a "low code" version.
In this animation, we will have the underline start at 0% width and then once the mouse hover in, it will grow in length to 100%
The no-code version will be done all natively in Webflow and the low code version will use a little custom CSS and we will add the underline animation to our nav links.
CSS code snippet:
.nav_link {
display: inline-block;
position: relative;
}
.nav_link:after {
content: '';
position: absolute;
width: 0%;
height: 0.125rem;
bottom: 0;
left: 0;
background-color: #0c2954;
transition: width 0.5s ease-out;
}
.nav_link:hover:after {
width: 100%;
}
---------------------------
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
https://amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
https://library.relume.io/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉Semflow The #1 SEO tool for Webflow & Framer
https://bit.ly/3Zfaa3z
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
https://untitledui.lemonsqueezy.com?a...
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
En esta página del sitio puede ver el video en línea Webflow Underline Animation Tutorial | Webflow Text Hover Effects de Duración hora minuto segunda en buena calidad , que subió el usuario Brian Love 04 febrero 2023, comparta el enlace con amigos y conocidos, en youtube este video ya ha sido visto 7,353 veces y le gustó 97 a los espectadores. Disfruta viendo!
