Setting up start game button in AFrame

So I'm working on a vr game for a school project. With aframe, you need to have a user interaction to enable sound on mobile device browsers. I am trying to create a button on the webpage that will act as the trigger and set the a-scene visibility to false. The problem is that the scene is still there just invisible and loading on top of the button so i can't press it.

I put the button in its own div and set the padding on top and bottom to 15px but that didn't work. I also tried to put the a-scene in it's own div but that didn't help

<div id="button">
   <button onclick="startGame()">Start</button>
</div>

<a-scene visible="false"> 
...

When I load the page up the button is present in the way i like it but i can't press it. It looks like the mouse is still set on the a-scene so anything underneath is untouchhable.