How could we stylize the button of a WebXR experience?

I’ve seen some posts about the new branch proposal and so like this one WebXR change Default Enter Exit Icons but unfortunately no practical usage case, I’ve tried to make a small change as a sample, that should only move the button to the right but I had no luck, everything seems to be ok… but it just doesn’t work

https://playground.babylonjs.com/#9K3MRA

Any tip? Thank you in advance.

1 Like

@RaananW is our XR guru and will definitely be able to help

The WebXR button is a simple HTML element which can be styled using CSS, or completely replaced but a custom button of your choice.
A custom button is just an HTML element on your screen. Any Element you wish to be the clickable element that will get people in XR. To use it you create a WebXREnterExitUIButton (WebXREnterExitUIButton | Babylon.js Documentation) and pass it in the customButtons array of the uiOptions of your experience helper (WebXREnterExitUIOptions | Babylon.js Documentation).
This way you are in full control of the button.

If you want to style the existing item, it’s a button element with the class babylonVRicon. It has a default background image and default colors, and you can change them as you see fit.

1 Like

Hi @Escobar just checking in, were you able to stylize your button?