Button Interaction Area is not flush to the buttons

HI all I hope this is the right area to ask this question. I am having an issue with UI.

I am using the 2D platformer template option that you get to chose when making your first game in unity and I am trying to imput custom button UI. I have managed to replace the text with sprites I have created and keep the aspect ratio. How ever when I try to make the rect area smaller so it is flush with the image it shrinks the sprite.

All I want to do it make the interaction area exactly the same size as the sprite beacuse at the moment I can click a dead zone to the left or the right of a button and it still works when it shouldnt.

This might be an issue to do with useing the premade game instead of making stuff from scratch but I would like to know how to fix it just incase I run into the same issue in the future.

I have attached some images to help display what the issue is.

Please note I can make the selection area bigger without it effecting the image if I turn off Horizontal laoyout group with no problem but not shrink it.

 

I am having the same issue but my interaction area is a slice on one side of my button and no conforming to the image shape. I would really like to have a set of handles or a transform panel to adjust this. The selectible area of my button does not show up any where. And actually the blue handles don't reflect the selection area.

 

you can try:
- either remove transparent part of you button asset - cut it away in source .png,
- or change sprite import to multiple and cut it in sprite editor.