From 3118d80aee4d6265dd0d89533e3bda1c5532ad1e Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Fri, 8 Apr 2022 13:03:33 -0300
Subject: [PATCH] Button Motion (#25)

---
 .../common/header/header.module.scss          |  2 +-
 src/components/common/header/index.tsx        |  6 ++-
 .../primitives/button/button.module.scss      | 37 +++++++++++++++++++
 src/components/primitives/button/index.tsx    |  4 +-
 src/css/global.scss                           |  1 +
 5 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/components/common/header/header.module.scss b/src/components/common/header/header.module.scss
index 94105c3..16a62bf 100644
--- a/src/components/common/header/header.module.scss
+++ b/src/components/common/header/header.module.scss
@@ -38,7 +38,7 @@
       width: tovw(7px, 'default', 7px);
       height: tovw(7px, 'default', 7px);
       content: '';
-      transition: opacity var(--normal-transition);
+      transition: opacity var(--duration-normal) var(--ease);
       transform: translateY(-50%);
       opacity: 0;
       background: var(--color-white);
diff --git a/src/components/common/header/index.tsx b/src/components/common/header/index.tsx
index 926605a..9b0da7c 100644
--- a/src/components/common/header/index.tsx
+++ b/src/components/common/header/index.tsx
@@ -39,7 +39,10 @@ const HeaderMobile = React.forwardRef<
             </li>
           ))}
       </ul>
-      <ButtonLink href="https://discord.com/invite/ukhbBemyxY">
+      <ButtonLink
+        variant="interactive"
+        href="https://discord.com/invite/ukhbBemyxY"
+      >
         Join Us
       </ButtonLink>
       <ul className={clsx(s['social'], 'social')}>
@@ -127,6 +130,7 @@ export const Header = () => {
         className="hide-on-mobile"
         href="https://discord.com/invite/ukhbBemyxY"
         size="small"
+        variant="interactive"
       >
         Join Us
       </ButtonLink>
diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss
index 60d3177..ce31a15 100644
--- a/src/components/primitives/button/button.module.scss
+++ b/src/components/primitives/button/button.module.scss
@@ -25,6 +25,43 @@
     color: var(--color-black);
   }
 
+  &--interactive {
+    overflow: hidden;
+    position: relative;
+
+    span {
+      position: relative;
+      mix-blend-mode: difference;
+    }
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &::before {
+      content: '';
+      background: var(--color-white);
+      width: 130%;
+      left: -150%;
+      transform: skew(10deg);
+      transition: transform var(--duration-normal) var(--ease-button);
+    }
+
+    &:hover {
+      background: transparent;
+      color: var(--color-white);
+
+      &::before {
+        transform: translate3d(90%, 0, 0) skew(30deg) scaleX(1.2);
+      }
+    }
+  }
+
   &--primary {
     border-color: var(--color-accent);
     box-shadow: 0 0 tovw(50px, 'default', 16px) var(--color-accent);
diff --git a/src/components/primitives/button/index.tsx b/src/components/primitives/button/index.tsx
index dc4a8c5..89c44e5 100644
--- a/src/components/primitives/button/index.tsx
+++ b/src/components/primitives/button/index.tsx
@@ -9,7 +9,7 @@ import s from './button.module.scss'
 
 export type ButtonProps = JSX.IntrinsicElements['button'] & {
   size?: 'small' | 'medium' | 'large'
-  variant?: 'default' | 'primary' | 'unstyled'
+  variant?: 'default' | 'primary' | 'unstyled' | 'interactive'
 }
 
 export const Button = React.forwardRef(
@@ -35,7 +35,7 @@ export const Button = React.forwardRef(
         {...rest}
         ref={ref}
       >
-        {children}
+        {variant === 'interactive' ? <span>{children}</span> : children}
       </Comp>
     )
   }
diff --git a/src/css/global.scss b/src/css/global.scss
index b6b2d63..d997a0b 100644
--- a/src/css/global.scss
+++ b/src/css/global.scss
@@ -26,6 +26,7 @@
 
   // Bezier
   --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-button: cubic-bezier(0.3, 1, 0.8, 1);
 
   // Transition
   --normal-transition: var(--duration-fast) var(--ease);