Menu
I have a button (anchor) that has a CSS3 gradient on it.
I want to animate/fade the gradient to one color when the user hovers over the button.
The problem is I can't find how to do this- since jQuery UI animation on colors works only on regular ones, not gradients.
Any ideas?
Thanks!
962
Thanks to the new @property defined in the CSS Properties and Values API Level 1 specification we can now have transition with custom properties (aka CSS variables).
We can do this by using background size property and set it to 600%. the more color you have the more you will need to increase the number. And next create the animation to move the background position so it appears that the gradient is slowly transforming color.
You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function).
You could use a CSS3 animation, although they aren't supported on all browsers. This page has an example of changing the background colour, obviously you'd need to add the gradient.
http://css3.bradshawenterprises.com/animations/
185
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
