Unity3d new UI: How to set button's interactable zone bigger than the attached image?

I believe the most proper way to make such button is like this:

  1. Create a new Button, remove default child Text.
  2. Set Width and Height of Button as you need for hitzone size.
  3. Add Vertical Layout Group component to the Button.
  4. Set Padding of the Vertical Layout Group to desirable difference between hitzone and visuals.
  5. Remove default Image component. Set alpha of default Image component to zero.
  6. Put your Image as child of Button.
  7. Fix tint: drag (or otherwise set) the child Image to Target Graphic field of Button.

You need to set it up so that the image is inside a button object. Like this:

enter image description here

This way you can have the Button as big as you want and the Image can be any size. If you don't need the Button background image just make the color transparent in the image componenent of the Button object.


A surprisingly better way (in terms of ease and performance) is to add a text child element, even if you already have one. Leave the text empty and resize it however you like. It doesn't add any alpha.

Tags:

Unity3D