How to make a typical Unity button

I need a unity button which has the following three features:

  1. Button clicked event is triggered on release.
  2. On pressing, an animation is played to shrink the transform scale; on releasing, another animation is played to expand the transform scale back to original size.
  3. If the user presses the button, then moves the cursor out of the button, then releases the mouse, we take this action as the user cancels the clicking.

Here is my problem, since I use the OnMouseDown() and OnMouseUp() method to handle the press and release action(relying on the collider component to trigger these two methods being invoked), while user clicks the very edge of the button, the tanform scale, as well as the collider scale, would be shrinked due to the pressing animation, which causes the cursor out of the transform scale range at the moment of releasing. So we treat it as the user cancels the clicking incorrectly.

So my questions are,

  1. Is it a typical way to use the OnMouseDown() and OnMouseUp() to mimic button clicking?
  2. Is there any efficent way to keep the collider’s size unchangable while the transform of the button is shrinking or expanding, so that we don’t treat it as clicking cancelled while a user clicks the very edge of a button?

I answered a similar question before I saw this question so I will just link you to my answer there.