DEV Community

Cover image for 100 underline/overlay animations | The ultimate CSS collection 🥇
Temani Afif
Temani Afif

Posted on • Updated on

100 underline/overlay animations | The ultimate CSS collection 🥇

Get tired searching animations for your menu items and links? Search no more! Here is a list of more than 100 different animations. From the simple one to the more complex one, you will for sure find what you want.

No SVG, No JS, No extra tag, No pseudo element, No keyframes ... All of them are done using backgrounds, transition and only one element. Simply add a class and enjoy.

I am not relying on pseudo element so you can easily use them with elements like input (where we cannot have pseudo element).

In order to understand the logic of each animation, I highly recommend my previous article about background-position


Table of content


The Basic

The Continuous

The Double

The Two Steps

The Unexpected

The Rounded

The Fading

The Infinite

Keep the hover for too long here.

The All Sides

The Thick

The Sliding

The below requires us to know the width of the element so it's more suitable for monospace fonts where we can use the ch unit

The Fancy


(2) and (5) use some hardcoded values that need to be adjusted based on the element width

The Inverted

The below doesn't work on Firefox due to a known bug

The 3D

Warning: the below uses some advanced CSS but I considered CSS variables to make it easy to control


That's it!

Tell me what do you think and which one is your favorite. 👇

I am also doing CSS loaders


You want to support me?

buy me a coffee

**OR**

Become a patron

Top comments (126)

Collapse
 
madsstoumann profile image
Mads Stoumann

Amazing collection! I used the "Basic 3" on a recent project, but had a CSS validation error, that boiled down to linear-gradient(currentColor 0 0).
Is that a short way of writing linear-gradient(to bottom, currentColor 0 0, currentColor 100% 0)?
And, as to bottom is default, that can be omitted I guess?

Collapse
 
afif profile image
Temani Afif

It's the short way of writing linear-gradient(currentColor,currentColor). The direction and the color stops aren't important since a gradient between two same colors will always give that color. I am defining two colors stop for it (0 and 0) to write the color only once inside the gradient.
The syntax I am using is a bit uncommon but it's valid. The CSS validator is never up to date anyway.
I wrote a recent article about this if you want: css-tricks.com/cool-hover-effects-...

Collapse
 
madsstoumann profile image
Mads Stoumann

Cool, didn’t know that syntax!

Collapse
 
krishan111 profile image
Krishan111 • Edited

You are really hardworking @afif 👍

Collapse
 
afif profile image
Temani Afif

thanks :)

Collapse
 
jamesqquick profile image
James Q Quick

This is incredible!

Collapse
 
mjcoder_5 profile image
MJCoder

Awesome collection - bookmarked! I am sure I'll be using this!

Collapse
 
kievandres profile image
Kiev Andres

Awesome! 🔥

Collapse
 
genevievecurry profile image
Genevieve Curry

Great job on putting this collection together!

I'm rather partial to The Double and The 3D :)

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
jbalagnaranin profile image
Jérémie Balagna-Ranin
The Inverted
The below doesn't work on Firefox due to a known bug
Enter fullscreen mode Exit fullscreen mode

Tested just now on Mac OS with Firefox 86.0.1, and it works well ;)

Otherwise, Thanks a lot for the ideas... I just like the inverted :D

Collapse
 
afif profile image
Temani Afif

good, probably the bug occur only on Windows OS then.

Collapse
 
icecoffee profile image
Atulit Anand

I'm loving it!
There are some people who can use every single animation as a different post for a series actually and then there's this guy.
Great minds

Collapse
 
afif profile image
Temani Afif

thanks :) will probably create more posts like this in the future ;)

Collapse
 
conradsollitt profile image
Conrad Sollitt

Wow incredible job Temani!!

I think I'll try out some of these in apps I'm developing on at work soon! Probably will try or at least consider these for future public facing sites I work on in the future as well.

My favorite are the 3D and Fancy ones at the bottom but I think for basic Db Web Apps I might use "The Basic" or "The All Sides" as I feel they provide just enough visual effects for a user to think "that's nice" but not distract from the site or task at hand.

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
conradsollitt profile image
Conrad Sollitt

Great job! These are awesome, your CSS skills and design are incredible!

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

That is indeed commendable. So many variations for a single state.

Collapse
 
dav3rs profile image
⚜Dave.rs⚜

It is really impressive. Could you make youtube tutorials explaining the technique you use to achieve these effects? I would like to learn.

Collapse
 
afif profile image
Temani Afif

Will think about this in the future. I never made tutorial videos but would be good to start doing it ;). In the meantime, If you have a question or you need a clarification about a particular effect I can explain you via comment

Collapse
 
afif profile image
Temani Afif

I have released more collections if you are intrested :) dev.to/afif/series/12016

Collapse
 
canbax profile image
yusuf

very nice archive for animations.

Collapse
 
d7460n profile image
D7460N

Thanks for the time and effort you put into this fantastic list!

How do you get the animation to wrap with the link text?

Thanks again!

Collapse
 
afif profile image
Temani Afif

well, most of them are not meant to work on wrapped text. I made them for menu item, short link, buttons, etc so only one line ... if you have a specific animation you want to wrap with text I can help you with

Collapse
 
d7460n profile image
D7460N

Thank you! "The Infinite" #2 animation would look nice when wrapping with text IMHO. Thank again!

Thread Thread
 
afif profile image
Temani Afif

here is with wrapping : jsfiddle.net/que6njpo/ .. you simply need to remove the display:inline-block ;)

Collapse
 
creativemacmac profile image
creativemacmac

I LOOOOOOVE your pure css effects🤩 is it possible for you to do a series on mouse cursor effects?

Collapse
 
afif profile image
Temani Afif

what kind of mouse cursor effects? can you show me examples :)

Collapse
 
creativemacmac profile image
creativemacmac

I think for one this one is crazy cool (unfortunately just a video)
youtube.com/watch?v=OYEymzptnHc

but would be soooo interesting to see what you would come up with with pure css regardless of whether the above is interesting to you or not...I read your posts religiously :)

Thread Thread
 
afif profile image
Temani Afif

ok I will keep this in mind ;) I always like to challenge my self as well

Collapse
 
fredperes profile image
Fred Peres

Wow! Nice work!