styling of links

src/public/util/colors.scss

@@ -0,0 +1,2 @@
+$no_alpha: #00000000;
+$white: #FFFFFF;

src/public/util/simple-basic.scss

@@ -1,3 +1,5 @@
+@import "colors.scss";
+
 body {
     min-height: 100vh;
 }
@@ -26,8 +28,24 @@ body {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    >a{
+        >button {
+            font-family: monospace;
+            font-size: 1rem;
+            font-weight: 600;
+            background-color: $no_alpha;
+            color: $white;
+            border: 4px solid $white;
+            width: 750px;
+            height: 3rem;
+            cursor: pointer;
+            transition: background-color .25s ease-in-out, color .25s ease-in-out;
 
-    >button {
+            &:hover {
-        background-color: #000;
+                background-color: $white;
+                color: #ff9601;
+                background-position: 2rem;
+            }
+        }
     }
 }

src/views/index.ejs

@@ -9,7 +9,9 @@
     </div>
     <div class="linkbox">
         <% links.forEach(link => { %>
-        <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
+        <a href="<%= link.hyperlink %>"> 
+            <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
+        </a>
         <% }) %>
     </div>
 </div>