Confusion over ImageButtons!

Hi, I want to create an in-game menu that has hexagonal buttons. Here is a rough example:

Screenshot 2024-06-13 003344

My problem is that the buttons will have a larger area than the hexagons. I want the player to only be able to interact with the hexagon, not the blank space outside of it. I want the part in red to be the button:

Screenshot 202222224-06-13 003344

This arises another problem - the overlapping areas. Due to the larger area the boxes overlap.

Overall, I would like the area that can be clicked just to be the hexagonal image. I’m sure there is a fix to this and I’m just being stupid. Thanks!

there is one way i could think about of doing this, is getting the mouse.y and mouse.x to see if its in a certain area, but this would be super complex and time cosuming. I think the best option is the hexagon is a imagelabel, add a textbutton to fit in the hexagon, the hexagon will overlap with the textbutton and be some parts where the textbutton won’t cover but it wont be overlaping with other hexagons.