feat(buttons): add new button variant

usenocturne · Jan 12, 2025 · ecc3a5a · ecc3a5a
1 parent 92ab8b0
commit ecc3a5a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/src/components/about/about-footer.tsx b/src/components/about/about-footer.tsx
@@ -15,9 +15,10 @@ function CallToAction() {
           Ready to take back your Car Thing?
         </p>
       </hgroup>
-      <div className="mt-6">
+      <div className="mt-8">
         <Button
-          className="w-full sm:w-auto dark:bg-zinc-900 dark:hover:bg-zinc-800"
+          variant="outline"
+          className="w-full transition-colors duration-500 sm:w-auto dark:bg-zinc-900 dark:hover:bg-zinc-950"
           href="/installation"
         >
           Get Started

diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -7,7 +7,7 @@ const variants = {
     'inline-flex items-center justify-center px-12 py-[calc(theme(spacing.2)-1px)]',
     'rounded-full border border-transparent bg-gray-950/40 shadow-md',
     'whitespace-nowrap text-base font-medium text-white',
-    'duration-350 transition ease-in-out data-[disabled]:bg-gray-950 data-[hover]:bg-gray-950/30 data-[disabled]:opacity-40',
+    'transition-all duration-500 ease-in-out data-[disabled]:bg-gray-950 data-[hover]:bg-gray-950/30 data-[disabled]:opacity-40',
   ),
   secondary: clsx(
     'relative inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)]',
@@ -17,10 +17,11 @@ const variants = {
     'data-[disabled]:bg-white/15 data-[hover]:bg-white/20 data-[disabled]:opacity-40',
   ),
   outline: clsx(
-    'inline-flex items-center justify-center px-2 py-[calc(theme(spacing.[1.5])-1px)]',
-    'rounded-lg border border-transparent shadow ring-1 ring-black/10',
-    'whitespace-nowrap text-sm font-medium text-gray-950',
-    'data-[disabled]:bg-transparent data-[hover]:bg-gray-50 data-[disabled]:opacity-40',
+    'relative inline-flex items-center justify-center px-12 py-[calc(theme(spacing.2)-1px)]',
+    'rounded-full border border-transparent bg-gray-400/40 shadow-md hover:bg-white/95 hover:text-gray-950',
+    'whitespace-nowrap text-base font-medium text-white',
+    'duration-350 transition ease-in-out data-[disabled]:bg-gray-950 data-[disabled]:opacity-40',
+    'isolate z-10',
   ),
 }
 
@@ -36,11 +37,24 @@ export function Button({
   className,
   ...props
 }: ButtonProps) {
-  className = clsx(className, variants[variant])
+  const buttonClassName = clsx(className, variants[variant])
+
+  const content =
+    typeof props.href === 'undefined' ? (
+      <Headless.Button {...props} className={buttonClassName} />
+    ) : (
+      <Link {...props} className={buttonClassName} />
+    )
 
-  if (typeof props.href === 'undefined') {
-    return <Headless.Button {...props} className={className} />
+  if (variant === 'outline') {
+    return (
+      <div className="group relative inline-flex">
+        <div className="absolute -inset-px rounded-full bg-gradient-to-r from-orange-400 via-pink-500 to-purple-600 opacity-0 blur-[10px] transition-[opacity,inset] duration-1000 group-hover:-inset-1 group-hover:opacity-100"></div>
+        <div className="absolute inset-0 rounded-full bg-gray-950/40 dark:bg-gray-950" />
+        {content}
+      </div>
+    )
   }
 
-  return <Link {...props} className={className} />
+  return content
 }
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -15,9 +15,10 @@ function CallToAction() {
           Ready to take back your Car Thing?
         </p>
       </hgroup>
-      <div className="mt-6">
+      <div className="mt-8">
         <Button
-          className="w-full sm:w-auto dark:bg-zinc-900 dark:hover:bg-zinc-800"
+          variant="outline"
+          className="w-full transition-colors duration-500 sm:w-auto dark:bg-zinc-900 dark:hover:bg-zinc-950"
           href="/installation"
         >
           Get Started