100 underline/overlay animations | The ultimate CSS collection 🥇

#css #beginners #webdev #codepen

Temani Afif Mar 16 ・Updated on Mar 31 ・2 min read

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

#webdev #tutorial #beginners #css

The Basic

Few notes:

currentColor will use the color defined inside color.
I am using CSS variables to make the code shorter. var(--d, 0) means that the default value is 0 then I change it on hover.
The syntax 0 100% /var(--d, 0) 3px means background-position / background-size. We adjust the 3px 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)

Krishan111 • Mar 17 • Edited

You are really hardworking @afif 👍

Temani Afif • Mar 17

thanks :)

Jacqueline R. Swearingen • Mar 18

Amazing css collection. Thanks!

Temani Afif • Mar 19

you're welcome. Wait for more collection like this ;)

Jérémie Balagna-Ranin • Mar 24

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

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

Temani Afif • Mar 24

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

atulit023 • Mar 17

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

Temani Afif • Mar 17

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

Mitesh Kamat • Mar 18

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

Genevieve Curry • Mar 16

Great job on putting this collection together!

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

Temani Afif • Apr 1

@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 :)

moaazib123 • Mar 18

Wow
Great work 👏

Démontant • Mar 18

Thanks :D

Temani Afif • Mar 31

@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 :)

⚜Dave.rs⚜ • Mar 22

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

Temani Afif • Mar 22

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

Phil Léger • Mar 18

Massive, thanks for sharing!

D7460N • Mar 18

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!

Temani Afif • Mar 18

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

D7460N • Mar 19

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

Temani Afif • Mar 19

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

yusuf • Mar 18

very nice archive for animations.

Fred Peres • Mar 18

Wow! Nice work!

kuldeepkumar9935 • Mar 19

It's really a great work

Thank you for this eg..

Luis • Mar 19

Thank you! This is great

Martins Gouveia • Mar 19

Very good! Very good and useful. You must have done a lot of work, congratulations.

Kunal SIngh • Mar 19

loved the varitions

Daniel Ignatov • Mar 16

Amazing stuff!

Franklin-uopeople • Apr 5

Thanks for your the hard work and for sharing that with the community!

G. Szabi • Apr 5

thanks for the tips

Guatam Kumar • Apr 3

Awesome Bro

José Santos Silva • Apr 3

Very good work.

simus51 • Apr 3

Love these! And the second collection. Thanks so much.

Andrew Baisden • Mar 26

Good job there is a lot to be learned here.

Paul Hubert • Mar 26

Amazing, it's fun how IHM can be "alive" with few lignes of css

ryanB • Mar 23

Excellent

Hasmukh Suthar • Mar 21

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 :)