Designing Gui, Invisible Button

Hi, I want to create a completely invisible button (sounds stupid I know…).
At the moment I am almost there but not 100%

Is this correct, how I disable the alpha?
Is there a more elegant way to do that?


When you say ‘not 100%’ what do you mean exactly?
Else, you can set your background to “transparent”; Next you can remove everything from alpha from the pointer interactions.

I did that, but the Button is still flashing when Entering (Hovering) with the mouse.

Oh, I see. Well, this is because it’s interactive. At some point if you want the user to understand he is entering an interactive zone, there must be some sort of visual effect happening. Else, you wouldn’t know it’s clickable.

Yes, it is against IDesign rules, but I need that for some reason.

Hmm. So is there a way to get around that?

Or do I need to implement something like a screenaligned quad, intersection test …
Bit much for a simple button. oO.

There’s (nearly) always a go-around. Can you further explain your goal a little?
Is it when picking a mesh or does it cover the entire scene (as a layer) no matter the context.
What sort of interaction is linked to this ‘invisible button’?

Basically I want an area on screen which I can Click, Touch to call any function, action I want.

This area is screen aligned and I can size and position it as I want.

So like a basic GUI button, but completely invisible.

The solution should be easy to use as I want to call different things during development.

I cannot explain in more than a button, but completely invisible :))

I think I alpha-ed 0 now all the events, but still flashing …

You explained it just fine. Give a minute to check out something…

OK, so after some searching and twisting things a little, I ended-up with this PG:

Open the console, to track the results.

Basically, the idea is not to use the ‘button’ control. The button control has already some specific behavior that can make it uneasy to twist. Instead, I chose to use a ‘rectangle’. I detect pointer in and pointer out on this rectangle (to simulate when the user actually enters the interactive zone since you cannot see it). I use this ‘entered’ or ‘out’ var to trigger a pointer interaction captured from the scene.

I have pushed to the left some of the instructions that are new and could be important to you.
Let me know if this solution matches your needs,

Edit: LoL! I was so certain that the button control would not account ‘thikness’ that I didn’t even try it. Now, I just went back to it and it works (thank you BJS :smiley:
So, in fact, all you have to do is add this 1 line of code to your button (line 32 in the PG):

buttonHide.thickness = 0;

and you can disregard all of the above (except I told you there’s always a go-around :wink:

Thank you so much for your effort! Very kind of you!

Phantastic, that there is a value for the thickness. I was too numb to find that as I was looking for border, frame etc.
Actually I was even looking at the GUI editor, json file aso but could find it.

Once found it seems so clear. Button | Babylon.js Documentation

You guys are so great helping out!


I know the wording and also the way to do things is sometimes a bit disturbing (or odd). I also remember having first searched for common words like ‘border’ or ‘outline’. Same for the rounded edges, which is cornerRadius. It’s also not always clear if only the value works or if you can use pixels or percent.
Best reference for all these is the doc and the API. Next, test in the PG.
I haven’t tested the all new GUI editor yet, but if you already see things missing, please share them with the team so they can work on improving.
Meanwhile, have a great day,

Hello @yamaciller just checking in, has your question been answered? :smiley:

thx. yes it is answered.
cheers .

1 Like