fix: merge hover-fill-to-right utility to button component style

EATSTEAK · Aug 12, 2024 · 7a60cdf · 7a60cdf
1 parent bf6975e
commit 7a60cdf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git 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
@@ -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%;
     }
 }