How to animate button so that different content appear on hover?

I figured out how to animate the button through Webflow’s tutorial. However, I am having a tough time figuring out how to animate the text so that the arrow crossfades in, and the text kinda goes back as shown here

I’ve included a link to my site below. Thank you


Here is my read-only link

Reveal on hover | Webflow University.

Did you try this tutorial? You would use a link block instead of a button to add the icon in?
Think of the heart as the arrow, but probably would need to play with opacity as it looks like they are hiding the heart with the background colour instead of an actual opacity change when hovering in.