Refactor button link styles for better UX

kobykotiv · Aug 18, 2024 · a14295e · a14295e
1 parent 3f69c72
commit a14295e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -57,7 +57,12 @@ let variants = cva(
           "hover:text-[var(--color-button-text-hover)]",
           "hover:border-[var(--color-button-border-hover)]",
         ],
-        link: ["bg-transparent py-2 border-b", "text-body", "border-b-body"],
+        link: [
+          "bg-transparent pb-1 text-body",
+          "after:bg-body after:absolute after:left-0 after:bottom-0.5 after:w-full after:h-px",
+          "after:scale-x-100 after:transition-transform after:origin-right",
+          "hover:after:origin-left hover:after:animate-underline",
+        ],
       },
     },
     defaultVariants: {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,10 +36,27 @@ export default {
           from: { transform: "translateX(0)" },
           to: { transform: "translateX(-100%)" },
         },
+        underline: {
+          "0%": {
+            transform: "scaleX(1)",
+            transformOrigin: "right",
+          },
+          "50%": {
+            transform: "scaleX(0)",
+            transformOrigin: "right",
+          },
+          "51%": {
+            transformOrigin: "left",
+          },
+          "100%": {
+            transform: "scaleX(1)",
+          },
+        },
       },
       animation: {
         spin: "spin .5s linear infinite",
         marquee: "marquee var(--animation-speed, 150ms) linear infinite",
+        underline: "underline 400ms linear",
         "fade-in": "fade-in 500ms ease-in forwards",
         "slide-down-and-fade":
           "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards",