1
npm i framer-motion

1
import { motion, MotionProps } from 'framer-motion';
2
import React from 'react';
3

4
type ShineButtonProps = {
5
  className?: string;
6
  children: React.ReactNode;
7
} & MotionProps;
8

9
const ShineButton: React.FC<ShineButtonProps> = ({ children, className, ...props }) => {
10
  return (
11
    <motion.button
12
      {...props}
13
      className={`relative overflow-hidden rounded-lg border border-neutral-700 px-6 py-3 text-white font-semibold transition-all duration-300 hover:border-neutral-400 hover:shadow-[0_0_10px_rgba(255,255,255,0.2)] active:scale-95 ${className}`}
14
      whileHover={{ scale: 1.05 }}
15
    >
16
      <motion.span
17
        className="absolute -left-full top-0 h-full w-[150%] blur-[6px] opacity-40"
18
        initial={{ x: '-150%' }}
19
        animate={{ x: '150%' }}
20
        whileHover={{ opacity: 60 }}
21
        style={{
22
          background: 'linear-gradient(-55deg, transparent 40%, #ffffffbb 50%, transparent 60%)'
23
        }}
24
        transition={{
25
          duration: 2,
26
          repeat: Infinity,
27
          ease: 'linear'
28
        }}
29
      />
30

31
      <span className="relative z-10">{children}</span>
32
    </motion.button>
33
  );
34
};
35

36
export default ShineButton;