diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 86605db..2f173cd 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -8,7 +8,7 @@ export const Button: Component<
   return (
     <a
       {...anchorAttributes}
-      class="hover-fill-to-right button"
+      class="button"
     >
       {self.children}
     </a>
diff --git a/src/components/button.css b/src/components/button.css
index 2f64e38..6ff0ae0 100644
--- a/src/components/button.css
+++ b/src/components/button.css
@@ -3,5 +3,25 @@
 @layer components {
     .button {
         @apply font-mono py-2 px-4 transition-colors border-2 before:bg-white bg-gradient-to-r from-gray-800 to-gray-800 text-gray-800 hover:text-white border-gray-800 dark:before:bg-gray-800 dark:from-white dark:to-white dark:text-white dark:hover:text-gray-800 dark:border-white;
+
+        position: relative;
+        background-size: 0% 100%;
+        background-repeat: no-repeat;
+        background-position-y: 100%;
+        transition: background-size 0.25s ease-out;
+    }
+
+    .button::before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        z-index: -10;
+        width: 100%;
+        height: 100%;
+    }
+
+    .button:hover {
+        background-size: 100% 100%;
     }
 }
\ No newline at end of file