Refactor start button styling

lewdry · Oct 21, 2024 · 25864b4 · 25864b4
1 parent c5840cf
commit 25864b4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -26,8 +26,9 @@
         <div>
             <p>Bonk!<br>Bouncing balls.</p>
             <p>Drag a ball to throw.<br>Double-tap screen to reset.</p>
-            <p>Tap to start.</p>
             <p>🟣➰🟢</p>
+            <button id="startButton">Start</button>
+            <br>
         </div>
     </div>
 

diff --git a/styles.css b/styles.css
@@ -35,3 +35,18 @@ canvas {
     border-radius: 10px;
     padding: 20px;
 }
+
+button {
+    margin-top: 5px;
+    padding: 0.3rem 20px;
+    font-size: 16px;
+    border: 2px solid #ccc;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.25s;
+}
+
+button:hover {
+    background-color: #f0f0f0;
+    border-color: #999;
+}