How to animate hover elements?

How to animate hover elements?

I have created a UI in UnrealEngine. I used a button with an image.
I also defined a hover version which is just the same image but with a stroke.
Since I have a special image with neon effect, I can’t use the built-in stroke function.

When I move the mouse pointer over the button, the version of the hover image with the stroke appears.
However, I would like the hover version of the image to not only appear, I want the stroke to fade in and out when I move the mouse pointer over the button, as it currently uses just a simple linear animation and not a fade in/out.

Here is a video of the normal animation, where i want to add the fade in/out.:

I have researched on the internet, but I have not found a way to do this.

Thanks in advance!

You can do this is many ways however the button appearenced don’t exist in animation graph they are built in the button class.

What you need to do is change button class of this to image
Render them as rounded boxes and do the animations manually.

Alternatively to doing it clasically by making images and controlling them animation graph, you can use scripts to control the current style of the button as below. Still I think you don’t have to do this at all still wanted to share information around how you can control them in a systemic way.