Hover animation not working on buttons with gradients
Hi,
I have a gradient setting on the Highlighted button and I've set the hover effect duration to 1 second, but the animation isn't working; the change is instantaneous. I've tried making some modifications to the CSS transition property, but I haven't been able to fix it.
I've tested it on other installations and the same thing happens. I think it's a widespread bug.
WP: 6.8.3
BT: 28.1.12
Thanks.
VIDEO: https://jmp.sh/hDYMgoEj
Comments
Hi,
It is a CSS limitation, so there is nothing we can do about that.
So if you want to use a gradient, you must be aware that there will be no smooth transition.
Best regards
Hi,
I've been doing some testing and I think that to use gradient transitions, it would be as simple as switching from using `background-image` to `background` and, since you already have the variables stored, building it solely with `background` like this example:
.button-theme {
--c1: #005bea;
--c2: #00c6fb;
background: linear-gradient(45deg, var(--c1), var(--c2));
transition: --c1 0.5s ease, --c2 0.5s ease;
}
.button-theme:hover {
--c1: #ff512f;
--c2: #dd2476;
}
I hope you can take this into account.
Best regards
Where did you get this code from?
Do you have any working examples available live so we can see and check them?
Best regards
Of course!
I've attached a short quiz I created.
Let me know what you think :)
Thank you very much, it helped a lot.
We will take a closer look at this, do some tests, and try to implement that in the upcoming updates.
Best regards