how to manage button , model opacity and hide or show model using model-viewer

[shihab-fw11-297]

hi
I used WebXR try to show 1 button on AR mode but i didn't see any html element in AR mode, below is my code and also how to manage model opacity and hide or show model using model-viewer in AR mode please help.

below is code to show help button in AR mode

<model-viewer   id="model-viewer" ar ar-modes="webxr scene-viewer quick-look "   camera-controls auto-rotate   src="./Assets/Astronaut.glb" style="--poster-color:#ffffff00;" alt="A 3D model of an astronaut." data-js-focus-visible=""  interpolation-decay="150"  ar-placement="floor" exposure="2.4" scale="0.15 0.15 0.15" orientation="0deg 0deg -45deg" environment-image="neutral">

<div id="error" class="hide">AR is not supported on this device</div>
<button id="ar-help">
  Pan to zoom
</button>
</model-viewer>

below is CSS code to show help button in AR mode
#ar-help{
position: absolute;
height: 36px;
display:none;
}

model-viewer[ar-status="session-started"] > #ar-help {
display: block;
}