Custom Shaped Buttons Unity UI

Question

Hi I am trying to create custom buttons on unity (trapeziums). I successfully created the visible area on Photoshop and imported it as Sprite 2D UI as per the following image:

The issue arises, when I'm trying to select one of the buttons in game, their border overlap each other, since the transparent area is still being considered as part of the clickable button area. How can I remove this?

EDIT:

Practically when I import I want the squared boxes to not be counted with the image. I need the edges of the orange area to be cut flush with that and not the entire area(i.e. including the transparent boxes).

Answer 1

You may achieve this by using Alpha Hit Test Minimum Threshold. Take a look at this nice video tutorial.

There is one extra step that is not shown in the video but mentioned in the comments: you have to change "Mesh Type" to "Full Rect" and not "Tight" as it is.

Hope that helps.