How do you handle a scaledown animation on a UI button?

Hi people, my question is quite simple and I want to know if my solution is valid or if I'm missing something and overdoing it.

So I want to use the same menu button animation for all button Pressed. So I use the same animation controller (animator) on all UI button. The animation is a single keyframe at 70% scale so when I press the button it scales down, typically called a punch.

Now my first problem is that if I want a big button and a small button that use the same pressed animation, it seems like I need to put the resized button image Inside the button as a child, otherwise the animation will override the scale.

My second problem is that when the scale down happens, if I had the mouse pressed at a position under which the scaled down button won't be anymore, it then goes to the normal animation, which has a scale of 1, so the button comes back under the mouse position, so it goes back to the pressed scale, and so on.

So my working setup is this and I want to know if I'm crazy or that's what I have to do.

(Root) Button (Button script, Transparent Image to determine the zone of the button, scaled to 1)

(Child) Content Holder (will be animated by the Pressed animation to scale from 1 to 0.7)

(Child of Child) Content (can be scaled however I want to have big and small buttons without being overriden by the scale animation)

That seems complicated to just punch a button on click, enlighten me or concur :) Thank you