Button Motion (#25)

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);

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>

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);

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>
     )
   }

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);