Page 1 of 1
CSS gradient animation on mouse hover
Posted: Wed Mar 09, 2022 8:41 am
by wwonderfull
Any idea how to do a css linear gradient color animation on a button hover or even in layout grid background? I do know there is animation manager but only the solid color animation happens there is no example of gradient css animation.
for example like this
https://colorlib.com/etc/lf/Login_v4/index.html
Re: CSS gradient animation on mouse hover
Posted: Wed Mar 09, 2022 8:52 am
by BaconFries
Similar question at the following see Pablos reply.
https://www.wysiwygwebbuilder.com/forum ... 38#p470838
A quick Google gave this for reference only.
https://codepen.io/P1N2O/pen/pyBNzX
Re: CSS gradient animation on mouse hover
Posted: Wed Mar 09, 2022 10:16 am
by Pablo
You can use the CSS transitions for this
https://wysiwygwebbuilder.com/transitions.html
A gradient is basically a background-image, defined as
Code: Select all
linear-gradient(to right, #04D7DF 0%, #FA02FF 100%)
then for hover use the inverse:
Code: Select all
linear-gradient(to right, #FA02FF 0%, #04D7DF 100%)