Discover the best underline websites created by professional designers. Get inspired and start planning your perfect underline web design today!

Here are 20 Plug & Play CSS-only link hover effects for your next project! 

Subtle line animations can be a simple way to enhance your site experience through delightful micro-interactions.

Inspired and adapted for Webflow from: https://github.com/codrops/LineHoverStyles

*includes 21 effects, but 20 sounds cleaner.

20 Link Effects

20 Line Hover Animations

Let's have some fun with daily interaction #1!

This demo showcases an underline that animates from left to right when the user hovers over a menu item.

To view more daily interactions and premium content visit: https://www.webdevforyou.com/

WebDev For You - Daily Interaction #1

These tabs are perty neat.

*Be sure to copy the Section called COPY ME so you don't have to unlink all the collection items.*

There's a neat hover interaction on the items thanks to a slick template from tycreated. Check out his templates for they are insanely cool and free.

Ok have at it! Enjoy!

Slick Underline Tabs

There are many ways to create highlights and underlines in text. Here are a couple examples that are based on playing with the background color.

Sign up if you want the lesson: https://www.webflowtips.com/b/how-to-create-custom-highlight-and-underline-text

P.S 🙂  🙌  - Like or follow if this was useful for you.

4 of 50

How to create custom highlight and underline text?

I saw some neato buttons on Gabriel Norman's site so I had a little fun making them.

Check out his slick site.
gnrm.se

Underline Link Buttons

underline-link-buttons

underline growing animation on hover

line-growing-animation-on-hover

Hey there! 
We're Benor Media, a Spanish-based Webflow agency. 
Here's the final redesign of our website. Feel free to clone it!
__________

-> https://www.benor.media/
-> info@benor.media

Benor Media

Benor Media - Cloneable Agency Template

Webflow

Cloneable showcasing what I went through over Webflow's livestream: https://www.youtube.com/watch?v=8fcM9XSwbzI

— Line break customization depending on viewport
— CSS underline customization
— Coloring SVGs with text's color

Feel free to clone and have fun with it!

Webflow & Tell

Livestream Cloneable — Line

Minim Cards Collection 1

Hover over those nav buttons for that sweet underline that tracks your movement a little.

Underline Nav

Minim Underline Nav Menu

Custom CSS to target only the "Current" link with Webflow's .w--current class. This changes the color on hover from the original (green) to an alternate color (purple) while leaving the other links unaffected.

This also uses Webflow IX to show an underline element on the hover of the links. Without the custom code the "Current" page link, on hover, would stay green.

current-state-link

Current Link Hover

Memberstack

Whipped up a quick project to answer a community question. https://discourse.webflow.com/t/custom-underline-effect-on-text/194472

Discover underline websites built by the Webflow community

Discover underline websites built by the Webflow community