styles buttons

src/main/resources/templates/pub/index.html

@@ -13,7 +13,6 @@
         .collapsible {
             background-color: #333333;
             color: black;
-            cursor: pointer;
             margin-top: 10px;
             padding: 18px;
             width: 100%;
@@ -39,6 +38,14 @@
             background: #333333;
             color: #fff
         }
+
+        button:hover {
+            background: #444444;
+        }
+        button:active {
+            background: #222222;
+        }
+
         input {
             margin: 10px;
         }
@@ -106,6 +113,11 @@
             color: #000
         }
 
+
+        .overlayButton:hover {
+            background: transparent;
+        }
+
         .tooltip {
             position: fixed;
             border-radius: 0.5rem;
@@ -191,7 +203,7 @@
         <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; margin: 20px 25px;">
             <label for="command">Command </label>
             <input type="text" id="command" style="flex-grow: 1" onkeyup="roll(event)"/>
-            <button hidden id="roll" onclick="roll()">Roll 🞂</button>
+            <button hidden id="roll" onclick="roll()">Roll 🎲</button>
             <button popovertarget="command-hint" data-trigger="hover" class="overlayButton">🛈</button>
         </div>