fix button collider

src/lib/IO/Button.svelte

@@ -2,6 +2,7 @@
     import { ButtonType } from "$lib/IO/ButtonType.ts";
     import { onMount } from "svelte";
 
+    export let href : string = "#";
     export let type : ButtonType = ButtonType.Primary;
     let cssName : string;
 
@@ -16,17 +17,17 @@
     });
 </script>
 
-<button class="button" style="--button-color: var({cssName});">
+<a href={href} class="button" style="--button-color: var({cssName});">
     <div class="content">
         <slot name="content">
             Click Me!
         </slot>
     </div>
-</button>
+</a>
 
 <style>
     .button {
-        width: 100%;
+        white-space: nowrap;
         border-radius: 6px;
         border: none;
         background-color: var(--button-color);
@@ -39,6 +40,7 @@
         font-size: 1.5em;
 
         box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
+        padding: 0.8em 4em;
     }
 
     .button:hover {
@@ -47,14 +49,17 @@
 
         cursor: pointer;
 
-        box-shadow:
-            inset 0 0 0 100px rgba(255, 255, 255, 0.25);
+        box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.25);
     }
 
     .content {
         width: 100%;
+        height: 100%;
+
         color: var(--text1);
 
-        padding: 0.8em 4em;
+        display: flex;
+        justify-content: center;
+        align-content: center;
     }
 </style>

src/routes/+page.svelte

@@ -39,10 +39,8 @@
     <footer id="news-footer">
         <div class="dummy"/>
         <div id="more-posts">
-            <Button type={ButtonType.Primary}>
-                <a slot="content" href="/post">
-                    <span>More News</span>
-                </a>
+            <Button href="/post" type={ButtonType.Primary}>
+                <span slot="content">More News</span>
             </Button>
         </div>
     </footer>
@@ -98,10 +96,6 @@
         min-width: 10em;
     }
 
-    a {
-        white-space: nowrap;
-    }
-
     .main-title {
         color: var(--text1);
         margin: 0 auto;