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

All you need to know about background-position
Temani Afif ・ Mar 13 ・ 12 min read
Table of content
- The Basic
- The Continuous
- The Double
- The Two Steps
- The Unexpected
- The Rounded
- The Fading
- The Infinite
- The All Sides
- The Thick
- The Sliding
- The Fancy
- The Inverted
- The 3D
The Basic
Few notes:
-
currentColor
will use the color defined insidecolor
. - I am using CSS variables to make the code shorter.
var(--d, 0)
means that the default value is0
then I change it on hover. - The syntax
0 100% /var(--d, 0) 3px
meansbackground-position / background-size
. We adjust the3px
to control the height/thickness of the line.
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. 👇
Discussion (94)
You are really hardworking @afif 👍
thanks :)
Amazing css collection. Thanks!
you're welcome. Wait for more collection like this ;)
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
good, probably the bug occur only on Windows OS then.
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
thanks :) will probably create more posts like this in the future ;)
That is indeed commendable. So many variations for a single state.
Great job on putting this collection together!
I'm rather partial to The Double and The 3D :)
@jbalagnaranin @genevievecurry @phil_lgr @moaaz_ibrahim @fredperes @canbax @dwighthaul_52 .. In case you missed it, I have released another collection: dev.to/afif/another-100-underline-... .. all feedback are welcome :)
Wow
Great work 👏
Thanks :D
@krishan111 @icecoffee @jacqueliner @jadenconcord @abdulkalam1233 @alexbrasileiro @zippytyro . In case you have missed it, I have released another collection: dev.to/afif/another-100-underline-... all feedback are welcome :)
It is really impressive. Could you make youtube tutorials explaining the technique you use to achieve these effects? I would like to learn.
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
Massive, thanks for sharing!
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!
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
Thank you! "The Infinite" #2 animation would look nice when wrapping with text IMHO. Thank again!
here is with wrapping : jsfiddle.net/que6njpo/ .. you simply need to remove the display:inline-block ;)
very nice archive for animations.
Wow! Nice work!
It's really a great work
Thank you for this eg..
Thank you! This is great
Very good! Very good and useful. You must have done a lot of work, congratulations.
loved the varitions
Amazing stuff!
Thanks for your the hard work and for sharing that with the community!
thanks for the tips
Awesome Bro
Very good work.
Love these! And the second collection. Thanks so much.
Good job there is a lot to be learned here.
Amazing, it's fun how IHM can be "alive" with few lignes of css
Excellent
I’m not sure if it’s only me but I can’t seem to see previews of any of the animations in the post body on my ios chrome. It’s a good post Thank you, I’m gonna check it out on my computer :)
are you able to see the "Hover me" text? or you cannot see the codepen preview at all?
Everything under heading ‘The Unexpected’, ‘The Rounding’... etc
How can you do such a cool things?
If you want to do it then you can do it :)