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.
@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.
Hi @Escobar just checking in, were you able to stylize your button?
Hey, sorry for rescuing this, but I’m not able to make it work 
Here I expect to see the button in top right, but because the system put this button in a custom style this is not happen. Any insight is welcome!
ping @RaananW
As it is added to the xr button overlay, which is absolute-positioned, you will need to overwrite the position definition of the container in order to do what you are trying to do:
Babylon.js Playground (babylonjs.com)
This does feel a bit off, so I will see what I can do to solve this. in the meantime - that’s the way to go 
Hi, it is almost working. I mean it is working, I broke a little bit the design, but it is happening 
ps: I didn’t find in documentation something about, only this topic. I think this will be usefull too
Cheers! 
yeah, the more I look at it the more I think that we should not change the added custom button. i’ll follow up on this. for now you will need to manipulate the button using css like you are doing it right now.
From the next version if you provide custom buttons the overlay will not be styled at all:
This way you can add HTML buttons and style them as you wish. You can also style the overlay if you want, but it has no styling per default.
by the way…
a main problem to customize a native vr button in some browsers by your own css is a dynamical button behavior of engine
easiest solution is…
just delete all line that contain “_btnVR.style” in sources like this
in what case does CSS fail?
If you are using a custom css for vr burron with left and top property. Babylon js will rewrite it.
even with !important added to it?
In some browsers it works. But in mobile chrome it is does not works. Im trying to solve it.
