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
- The All Sides
- The Thick
- The Sliding
- The Fancy
- The Inverted
- The 3D
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
OR
Latest comments (121)
I want to automatically create an underline and then automatically remove the underline, what should I do? Could you help me?
where is the source code link
This is incredible!
Awesome! 🔥
Awesome collection - bookmarked! I am sure I'll be using this!
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 bottomis default, that can be omitted I guess?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 (0and0) 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-...
Cool, didn’t know that syntax!
These all look amazing! My favorite is fancy-1. Good job!
Thank you very much. I used the 8th one from the "The All Sides" pack in my new blog and it turnet out awesome. :)
Check it out: uselessdivs.com/
I LOOOOOOVE your pure css effects🤩 is it possible for you to do a series on mouse cursor effects?
what kind of mouse cursor effects? can you show me examples :)
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 :)
ok I will keep this in mind ;) I always like to challenge my self as well
great work, appreciate it!