Mobile Button - When tapping (before releasing), should it grow or shrink?

Question

I'm wondering, On Mobile, when pressing a button (before releasing the finger), should the button grow or shrink? After the user lift his finger, the button returns to normal state.

Illustration:

Answer 1

TL;DR: Both methods can work. Shrinking is more logical but has less visibility because of the user's finger. Growing is not corresponding to expectations of real life but the interaction is better visible.

---

Instinctically, I would always prefer a button to shrink, as you are pressing it down and that corresponds to the perception of the real world.
The only problem that can arise with this is that the finger then covers the button and the user can not see what happens to it anymore. So the growing method has the advantage of better visibility.

The Google Material Design Guidelines mention elevation and how it helps the user understand the order of the UI elements.
They have one section that talks about raised buttons and these should go up when pressed. There is an interesting discussion about this here:
Material design - buttons raise, not depress
I personally do not agree with that decision as it comes off as totally counter-intuitive.

Here is another question that might be related to yours:
Make people understand they can click on a button in a flat design

---

In the end, you can probably pull off both methods as long as you design them appealing and understandable enough.

Answer 2

Always prefer Shrink because by shrinking button, we are showing user that it is pressed. so for showing pressed effect, we should shrink button, it's a good practice and It's good for Ux.

For more information, you can check this link.