First of all, how was the gradient in those buttons applied? A short trip to Dev Tools answered, it was border-image with a gradient. GREAT!
So I made a simple demo of those buttons:
Now, all I needed was to apply a crazy transition, to make the grandient animate. For that, I’m taking advantage of the hue-rotate() filter property, it will go from 0deg to 360deg in a 4 seconds transition. Let’s see the result! (Psst! Hover over it!)
Now to the important part, how does this work?
Hue-Rotate is a filter that uses degrees; that’s because it’s based on the color wheel, it will go from zero degrees (current color) to 360 degrees (all around the circle, back to the first point). Whenever we apply this with a transition, no matter the original background-image or color, that will make a 360deg turn going from one color to the other until it reaches its original position. If the color is more saturated, the result will be so; if it’s darker, it will be darker; and so on. Pretty cool!
You can use this on animations or transitions and make your inner animation monster happier with just a little bit of rainbow colors!
Oh, and don’t forget the Unicorn! (Buggy in Chrome, sorry!)