better layout

web/css.css

@@ -5,12 +5,16 @@ body {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
+    margin: 0;
 }
 
 html {
     background-color: rgb(71, 68, 68);
 }
 
+li {
+
+}
 
 div {
     color: white;
@@ -98,7 +102,24 @@ div {
     float: right;
     color: #f2f2f2;
     text-align: center;
-    padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
+}
+
+.button {
+    background-color: #333;
+    text-decoration: none;
+    padding: 14px 16px;
+    border: none;
+    font-size: 17px;
+    color: #f2f2f2;
+}
+
+.button:hover {
+    background-color: rgb(199, 71, 71);
+    color: black;
+    text-decoration: none;
+    padding: 14px 16px;
+    border: none;
+
 }

web/statestiek.html

@@ -20,8 +20,9 @@
         <a href="index.html">Home</a>
         <a class="active" href="statestiek.html">Station statestieken</a>
         <div class="commandbar">
-            <button onclick="connect()">Connect</button>
-            <button onclick="disconnect()">Disconnect</button>
+                <button class="button" onclick="connect()">Connect</button>
+                <button class="button" onclick="disconnect()">Disconnect</button>
+      
         </div>
     </div>