Custom enter-vr button

src/index.html

@@ -33,7 +33,8 @@
       proxy-event__cleargame1="event: pausemenuexit; as: cleargame; to: a-scene"
       proxy-event__cleargame2="event: pausemenurestart; as: cleargame; to: a-scene"
       search
-      fog="color: #a00; density: 0.035; type: exponential">
+      fog="color: #a00; density: 0.035; type: exponential"
+      vr-mode-ui="enterVRButton: #vrButton">
       <a-assets timeout="10000">
         <a-asset-item id="arrowObj" src="assets/models/arrow.obj"></a-asset-item>
         <a-asset-item id="backglowObj" src="assets/models/backglow.obj"></a-asset-item>
@@ -200,5 +201,6 @@
         <a-entity id="mouseCursorMesh" mixin="cursorMesh" cursor-mesh="cursorEl: #mouseCursor"></a-entity>
       {% endif %}
     </a-scene>
+    <a id="vrButton" href="#" title="Enter VR / Fullscreen"></a>
   </body>
 </html>

src/index.js

@@ -17,3 +17,5 @@ require('aframe-thumb-controls-component');
 
 requireAll(require.context('./components/', true, /\.js$/));
 requireAll(require.context('./state/', true, /\.js$/));
+
+require('./style.css');

src/style.css

@@ -0,0 +1,24 @@
+#vrButton {
+  position: absolute;
+  background: url(../assets/img/enter-vr-button-background.png) no-repeat;
+  background-size: cover;
+  border: 0;
+  cursor: pointer;
+  right: 20px;
+  bottom: 20px;
+  z-index: 9999999;
+  width: 84px;
+  height: 47px;
+}
+
+#vrButton.a-hidden {
+  visibility: hidden;
+}
+
+#vrButton:active {
+  border: 0;
+}
+
+#vrButton:hover {
+  background-position: 0 -50.5px;
+}