1
npm i framer-motion

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

4
type GlassButtonProps = HTMLMotionProps<'button'> & {
5
  children?: React.ReactNode;
6
  className?: string;
7
};
8

9
const GlassButton = ({ children, className, ...props }: GlassButtonProps) => {
10
  return (
11
    <motion.button
12
      {...props}
13
      className={`relative overflow-hidden rounded-xl px-6 py-3 text-white font-semibold
14
        bg-gradient-to-tr from-[#46C0F780] to-[#E3E8EA80] backdrop-blur-lg 
15
        shadow-inner shadow-white/20 transition-all duration-300 
16
        hover:shadow-lg hover:shadow-cyan-200/30 ${className}`}
17
      initial={{ opacity: 0 }}
18
      animate={{ opacity: 1 }}
19
    >
20
      {/* Light Reflection Animation */}
21
      <motion.span
22
        className="absolute inset-0"
23
        style={{
24
          background: 'linear-gradient(-70deg, transparent 45%, #ffffffa0 50%, transparent 55%)',
25
          filter: 'blur(2px)'
26
        }}
27
        initial={{ x: '-100%' }}
28
        animate={{ x: '100%' }}
29
        transition={{
30
          duration: 2,
31
          repeatDelay: 1,
32
          repeat: Infinity,
33
          ease: 'linear'
34
        }}
35
      />
36

37
      {/* Button Content */}
38
      <div className="relative">{children}</div>
39
    </motion.button>
40
  );
41
};
42

43
export default GlassButton;