Style buttons

KasenX · KasenX · commit c279f9aae4ae · 2024-04-27T10:30:25.000+02:00
diff --git a/css/style.css b/css/style.css
@@ -17,6 +17,24 @@ nav ul {
     padding: 0;
 }
 
+.img-button {
+    background: none;
+    border: solid 3px white;
+    border-radius: 10%;
+    cursor: pointer;
+    padding: 8px;
+    margin: 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.img-button svg {
+    color: white;
+    width: 48px;
+    height: 48px;
+}
+
 main {
     height: 100%;
     display: flex;
diff --git a/index.html b/index.html
@@ -14,7 +14,13 @@
     <body>
         <nav>
             <ul>
-                <li><button id="leaderboard-button">Leadboard</button></li>
+                <li>
+                    <button id="leaderboard-button" class="img-button">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M22,7H16.333V4a1,1,0,0,0-1-1H8.667a1,1,0,0,0-1,1v7H2a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V8A1,1,0,0,0,22,7ZM7.667,19H3V13H7.667Zm6.666,0H9.667V5h4.666ZM21,19H16.333V9H21Z"/>
+                        </svg>
+                    </button>
+                </li>
             </ul>
         </nav>
 
@@ -41,7 +47,14 @@
         </main>
 
         <div>
-            <button id="reset-button">Reset</button>
+            <button id="reset-button" class="img-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" fill="currentColor">
+                    <path d="M600,0C268.629,0,0,268.629,0,600s268.629,600,600,600
+                        c222.411,0,416.39-121.104,520.02-300.879L908.79,777.612C847.217,884.405,732.127,956.47,600,956.47
+                        c-196.873,0-356.47-159.597-356.47-356.47S403.127,243.53,600,243.53c84.387,0,161.732,29.521,222.729,78.589L665.186,434.18
+                        L1200,612.524V53.613l-174.17,123.926C917.124,67.952,766.553,0,600,0z"/>
+                </svg>
+            </button>
         </div>
 
         <article id="leaderboard" style="display: none;">
