Webflow Underline Animation Tutorial | Webflow Text Hover Effects
5.1 هزار بار بازدید -
2 سال پیش
-
In this video, I'll show
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
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
https://www.semflow.com/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 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?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
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
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
https://www.semflow.com/?via=brian
---------------------------
👉Try Webflow
https://webflow.grsm.io/dn8xly95yi9g
---------------------------
👉 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?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
https://www.sonduckfilm.com/?ref=22
---------------------------
👉 Envato Elements
https://1.envato.market/yR6A4b
---------------------------
2 سال پیش
در تاریخ 1401/11/15 منتشر شده
است.
5,126
بـار بازدید شده