Button fill covering button label when animating


I’m having some trouble with a simple button interaction, which i suspect is due to a bug rather than user error because i’ve seen the same issue with some public cloneables.

The below cloneable is actually from @PixelGeek ‘7 Buttons’ tutorial on youtube, but i’m using the same technique in my own project and have found that this cloneable has the same issue as well.

Link to cloneable project:

The specific issue I have is with ‘Button One’. The ‘button label’ text colour should transition from black to white and should remain on top of the ‘button fill’ as it animates. Instead, it looks as though the ‘button fill’ is animating on top of the ‘button label’ and then dropping back behind once the animation is complete.

You can see how the button should perform here:

I think the issue has something to do with the Z-index of the button text and fill but cannot figure it out after a few hours of trying different fixes.

Thanks for taking the time to read,