button style

templates/GameAnnotation2.html

@@ -122,7 +122,7 @@
   <div id="replayWindowGame">
   </div>
     <p><b>Click "Q" to stop replay and quit</b></p>
-  <div align="center"  id = "replayButton"><button onClick='closeReplayWindow()'>Close Window</button></div>
+  <div align="center"  id = "replayButton" ><button onClick='closeReplayWindow()' class="cirButton">Close Window</button></div>
 </div>
 
 
@@ -319,7 +319,7 @@ function Replay(id){
     }
   </script>
       <br>
-    <button onclick="postOrder()">Submit</button>
+    <button onclick="postOrder()" class="cirButton">Submit</button>
    </div>
 
 </section>

templates/GameOver.html

@@ -171,9 +171,9 @@
         <h3>
            Do you want to play another round?
         </h3>
-        <button onclick="window.location.href = '/gameplay2';">Yes</button>
-        <button onclick="window.location.href = 'about:blank';">No</button>
-        <div style="">
+        <button onclick="window.location.href = '/gameplay2';" class="cirButton">Yes</button>
+        <button onclick="window.location.href = 'about:blank';" class="cirButton">No</button>
+        <div >
         <button onclick="
         if('{{stage}}' == '2'){
             window.location.href = '/gameplay2';
@@ -188,7 +188,7 @@
         }else{
             window.location.href = '/gameplay2';
         }
-       " style="visibility: hidden">Finish!</button>
+       " style="visibility: hidden" class="cirButton">Finish!</button>
             </div>
       </div>
 </section>

templates/GamePlay.html

@@ -54,6 +54,13 @@
       font-family: 'Consolas', monospace;
       color: #c4cbcf;
     }
+    .cirButton {
+      width:100%;
+      height:60px;
+      border-radius: 40px;
+      cursor: pointer;
+      border: none;
+    }
 
     svg{
       width: 50px;

templates/GameTutorial.html

@@ -90,6 +90,13 @@
       transform: translate(-50%, -50%);
 
     }
+    .cirButton {
+      width:100%;
+      height:60px;
+      border-radius: 40px;
+      cursor: pointer;
+      border: none;
+    }
 
     .loader {
       position: absolute;
@@ -180,13 +187,13 @@
           <br>
           <button onclick="
           window.location.href = window.location.href;
-          "><h3>Repeat Tutorial</h3></button>
+          " class="cirButton"><h3>Repeat Tutorial</h3></button>
         </div>
         <div class="col-md-6" align="center" style="visibility: hidden;" id = "game">
           <br>
           <button onclick="
           window.location.href = window.location.href+'/data'
-          "><h3>Play Game</h3></button>
+          " class="cirButton"><h3>Play Game</h3></button>
         </div>
 
         <script>

templates/GameWelcome.html

@@ -171,7 +171,7 @@
 <div id="replayWindow" class="popwindow">
   <div id="replayWindowGame">
   </div>
-  <div align="center"><button onClick="closeReplayWindow()">Close Window</button></div>
+  <div align="center"><button onClick="closeReplayWindow()" class="cirButton">Close Window</button></div>
 </div>