Overlapping GUI buttons

I don't use the GUI system that much, so I'm not that familiar with it, but I'm not aware of any support for non-rectangular click areas. (If I'm wrong, I'm sure someone will correct me.)

In any case, I probably wouldn't use the GUI system for this, but would instead implement it manually. Although I haven't tested this, here's what I'd try first:

Represent all the keys using bounding rectangles; you can use the Unity Rect struct (and its Contains() function) for this.

For the white keys, size the rect so that it fully contains the key. When checking to see what key has been clicked, check all the black keys first, and then the white keys, and choose the first key for which the bounding rect contains the query point. Unless I'm overlooking something, this should have the effect of handling the irregular shapes of the white keys correctly.

It'll be a little more work than using the GUI system, but I think it will probably give you better results. (Again, unless there's functionality available that I'm not aware of.)

Also, you might be able to accomplish the same thing using the GUI system by creating the controls in the order described above (black keys and then white keys), but only using Button() controls until a click was detected, and using Label() controls (or something similar) thereafter. That's speculative though; I'd have to try it before saying with certainty that it would work.