feat: slide border button

Author: wkylin

src/components/stateless/SlideButton/index.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import clsx from 'clsx'
+
+const SlideButton = ({
+  children,
+  className,
+  textColor = '#1670f0',
+  borderStartColor = '#0c002b',
+  borderEndColor = '#1779ff',
+  backgroundColor = 'transparent',
+  style,
+  ...props
+}) => {
+  const buttonStyle = {
+    '--border-start': borderStartColor,
+    '--border-end': borderEndColor,
+    '--text-color': textColor,
+    '--bg-color': backgroundColor,
+    ...style,
+  }
+
+  return (
+    <span
+      className={clsx(
+        'relative cursor-pointer overflow-hidden px-[10px] py-[10px] text-[14px] tracking-[5px] uppercase no-underline shadow-[0_20px_50px_rgba(0,0,0,0.5)]',
+        'bg-[var(--bg-color)] text-[var(--text-color)]',
+        className
+      )}
+      style={buttonStyle}
+      {...props}
+    >
+      <span className="animate-wui-slide-right absolute top-0 left-0 h-[2px] w-full bg-linear-to-r from-[var(--border-start)] to-[var(--border-end)]" />
+      <span className="animate-wui-slide-down absolute top-0 right-0 h-full w-[2px] bg-linear-to-b from-[var(--border-start)] to-[var(--border-end)]" />
+      <span className="animate-wui-slide-left absolute bottom-0 left-0 h-[2px] w-full bg-linear-to-l from-[var(--border-start)] to-[var(--border-end)]" />
+      <span className="animate-wui-slide-up absolute top-0 left-0 h-full w-[2px] bg-linear-to-t from-[var(--border-start)] to-[var(--border-end)]" />
+      {children}
+    </span>
+  )
+}
+
+export default SlideButton

src/pages/home/index.jsx

@@ -66,6 +66,7 @@ import FlipWords from '@stateless/FlipWords'
 import BorderBeam from '@stateless/BorderBeam'
 import AutoSlider from '@stateless/AutoSlider'
 import AnimText from '@stateless/AnimText'
+import SlideButton from '@stateless/SlideButton'
 import firstImage from '@assets/images/88-300x160.jpg'
 import secondImage from '@assets/images/2-300x160.jpg'
 
@@ -664,6 +665,24 @@ const Home = () => {
       <section style={{ margin: 20 }} className={styles.eHElAY}>
         Hi, React!
       </section>
+      <section style={{ margin: 20 }} className="z-30 flex w-full items-center justify-start gap-8">
+        <SlideButton
+          backgroundColor="#0c002b"
+          textColor="#1670f0"
+          borderStartColor="rgba(22, 112, 240, 0.1)"
+          borderEndColor="rgba(22, 112, 240, 0.7)"
+        >
+          Button
+        </SlideButton>
+        <SlideButton
+          backgroundColor="#1a0b2e"
+          textColor="#ff00ff"
+          borderStartColor="rgba(255, 0, 255, 0.1)"
+          borderEndColor="rgba(0, 255, 255, 0.7)"
+        >
+          Button
+        </SlideButton>
+      </section>
 
       <section>
         <div className={styles.stages}>

src/styles/reset.css

@@ -50,6 +50,51 @@
       transform: translate3d(0, 0, 0);
     }
   }
+
+  --animate-wui-slide-right: wui-slide-right 2s linear infinite;
+  --animate-wui-slide-down: wui-slide-down 2s linear infinite;
+  --animate-wui-slide-left: wui-slide-left 2s linear infinite;
+  --animate-wui-slide-up: wui-slide-up 2s linear infinite;
+
+  @keyframes wui-slide-right {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes wui-slide-down {
+    0% {
+      transform: translateY(-100%);
+    }
+
+    100% {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes wui-slide-left {
+    0% {
+      transform: translateX(100%);
+    }
+
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes wui-slide-up {
+    0% {
+      transform: translateY(100%);
+    }
+
+    100% {
+      transform: translateY(-100%);
+    }
+  }
 }
 
 .hue-clip {