OnMouseEnter colour fade

I’m trying to create a button that gently fades from one colour to another on hover. I can add a mouseover fill color but this changes straightaway, without any fade.

One solution is set a fill colour to, say 60% opacity, and then add an interaction that sets the colour back to 100% OnMouseEnter with a gentle fade, which works nicely. However, if the button is placed on a coloured background, it it obviously partially transparent.

Is there a different way to specify 2 colours and set a fade between them? Perhaps using a script?

Thanks

You could just put a colored rectangle behind it.

Hi. I did it with dynamic panels. The button itself is a dynamic panel that contains the text label as a widget and a nested dynamic panel that has two panel states with different colors for the buton.
By mouse enter and mouse out events I change the panel states of the nested DP with the button colors.
See also the attached example.

ButtoFade.rp (55.3 KB)