Re-do button styles, fix buttons inside anchors

MuonMC · Jun 27, 2024 · 869a47d · 869a47d
1 parent 7eea2d5
commit 869a47d
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 53 deletions.
diff --git a/_layouts/index.html b/_layouts/index.html
@@ -43,10 +43,10 @@
             <img src="/images/backthematic.webp" alt="MuonMC thematic background image">
             <div class="big-image-text">
                 <p>The modloader that works.</p>
-                <a href="/download.html">
-                    <button class="button-download" type="button">Download</button></a>
-                <a href="/develop.html">
-                    <button class="button-develop">Develop</button></a>
+                <a href="/download.html" class="button-round-generic button-download">
+                   Download</a>
+                <a href="/develop.html" class="button-round-generic button-develop">
+                    Develop</a>
             </div>
         </div>
 

diff --git a/css/styles.css b/css/styles.css
@@ -99,73 +99,53 @@ body {
     margin-bottom: 0%;
 }
 
-.button-develop {
-    border-radius: 5px;
-    background-color: rgb(61, 59, 59);
+.button-round-generic {
+    background-color: white;
     border: none;
     font-family: "Kanit", sans-serif;
     font-weight: 500;
     font-style: normal;
     font-size: 14pt;
-    color:  white;
-    padding: 4px 16px;
+    padding: 8px 16px;
     text-align: center;
     text-decoration: none;
     display: inline-block;
     transition-duration: 0.4s;
+    border-radius: 5px;
 }
 
-.button-develop:hover {
-    background-color: white;
-    color:  black;
+.button-round-generic-container a{
+    color:black;
 }
 
-.button-template {
-    border-radius: 5px;
-    background-color: white;
-    border: none;
-    font-family: "Kanit", sans-serif;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 14pt;
-    color:  black;
-    padding: 4px 16px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    transition-duration: 0.4s;
+.button-round-generic-container a:hover{
+    color: white;
 }
 
-.button-template:hover {
+.button-round-generic:hover {
     background-color: black;
+}
+
+.button-develop {
+    background-color: rgb(61, 59, 59);
     color:  white;
 }
 
+.button-develop:hover {
+    background-color: white;
+    color:  black;
+}
 
 .button-download {
-    border-radius: 5px;
-
     background-color: rgb(55, 55, 148);
-    border: none;
-    font-family: "Kanit", sans-serif;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 14pt;
     color:  white;
-    padding: 4px 16px;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    transition-duration: 0.4s;
 }
 
 .button-download:hover {
     background-color: white;
-    border: none;
     color:  black;
 }
 
-
 .big-image img {
     width: 100%;
     height: 300px;

diff --git a/develop.markdown b/develop.markdown
@@ -12,6 +12,8 @@ The project is in its early stages, which means there's not much of a point to d
 
 If you were looking to make a mod for such a little modloader, you're probably more interested in what's behind the curtain. We welcome you to join in on MuonMC's development!
 
-<a href="https://github.com/MuonMC">
-    <button class="button-template">MuonMC on GitHub</button>
-</a>
+<div class="button-round-generic-container">
+    <a href="https://github.com/MuonMC" class="button-round-generic">
+        MuonMC on GitHub
+    </a>
+</div>
diff --git a/download.markdown b/download.markdown
@@ -12,6 +12,8 @@ The project is in its early stages, so you can't really download it right now. B
 
 If you want to help with MuonMC development, hop in!
 
-<a href="https://github.com/MuonMC">
-    <button class="button-template">MuonMC on GitHub</button>
-</a>
+<div class="button-round-generic-container">
+    <a href="https://github.com/MuonMC" class="button-round-generic" >
+        MuonMC on GitHub
+    </a>
+</div>
diff --git a/index.markdown b/index.markdown
@@ -14,14 +14,18 @@ Forked from the QuiltMC toolchain, Muon focuses only on the essentials, aiming t
 
 Making a mod for Muon is easy. You can quickly get up and running with our project generator, and get on to creating something by reading our comprehensive documentation.
 
-<a href="/develop.html">
-    <button class="button-template">Generate a Template</button>
-</a>
+<div class="button-round-generic-container">
+    <a href="/develop.html" class="button-round-generic">
+        Generate a Template
+    </a>
+</div>
 
 # Friendly to users
 
 It's quite easy to download and install the latest version of Muon, simply click the button below and proceed to choose the version you want:
 
-<a href="/download.html">
-    <button class="button-template">Download and Install</button>
-</a>
+<div class="button-round-generic-container">
+    <a href="/download.html" class="button-round-generic">
+        Download and Install
+    </a>
+</div>