DEV Community

loading...
Cover image for 100 underline/overlay  animations | The ultimate CSS collection 🥇

100 underline/overlay animations | The ultimate CSS collection 🥇

afif profile image Temani Afif Updated on ・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


Table of content


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)

pic
Editor guide
Collapse
krishan111 profile image
Krishan111 • Edited

You are really hardworking @afif 👍

Collapse
afif profile image
Collapse
jacqueliner profile image
Jacqueline R. Swearingen

Amazing css collection. Thanks!

Collapse
afif profile image
Temani Afif Author

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

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 Author

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

Collapse
icecoffee profile image
atulit023

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 Author

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

Collapse
miteshkamat27 profile image
Mitesh Kamat

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

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 Author

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

Collapse
moaaz_ibrahim profile image
moaazib123

Wow
Great work 👏

Collapse
oliviercreativ_74 profile image
Démontant

Thanks :D

Collapse
afif profile image
Temani Afif Author

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

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 Author

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
phil_lgr profile image
Phil Léger

Massive, thanks for sharing!

Collapse
dragon 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 Author

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
dragon 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 Author

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

Collapse
canbax profile image
yusuf

very nice archive for animations.

Collapse
fredperes profile image
Fred Peres

Wow! Nice work!

Collapse
kuldeepkumar9935 profile image
kuldeepkumar9935

It's really a great work

Thank you for this eg..

Collapse
lam442 profile image
Luis

Thank you! This is great

Collapse
recitomartins profile image
Martins Gouveia

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

Collapse
singhkunal2050 profile image
Kunal SIngh

loved the varitions

Collapse
danielignatov profile image
Daniel Ignatov

Amazing stuff!

Collapse
franklinuopeople profile image
Franklin-uopeople

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

Collapse
haaami01 profile image
G. Szabi

thanks for the tips

Collapse
gksvg profile image
Guatam Kumar

Awesome Bro

Collapse
bigol profile image
José Santos Silva

Very good work.

Collapse
simus51 profile image
simus51

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

Collapse
andrewbaisden profile image
Andrew Baisden

Good job there is a lot to be learned here.

Collapse
dwighthaul_52 profile image
Paul Hubert

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

Collapse
dreamcreatordev profile image
ryanB

Excellent

Collapse
zombierobo profile image
Hasmukh Suthar

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

Collapse
afif profile image
Temani Afif Author

are you able to see the "Hover me" text? or you cannot see the codepen preview at all?

Collapse
zombierobo profile image
Hasmukh Suthar

Everything under heading ‘The Unexpected’, ‘The Rounding’... etc

Collapse
iamrohitsawai profile image
Rohit Kiran Sawai

How can you do such a cool things?

Collapse
afif profile image
Temani Afif Author

If you want to do it then you can do it :)