1
npm i framer-motion

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

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

9
const AnimatedGradientButton = ({ children, className, ...props }: AnimatedGradientButtonProps) => {
10
  return (
11
    <motion.button
12
      {...props}
13
      initial={{ scale: 1, boxShadow: '0px 0px 10px rgba(255, 255, 255, 0.6)' }}
14
      whileHover={{
15
        scale: 1.08,
16
        boxShadow: '0px 0px 20px rgba(255, 255, 255, 0.6)'
17
      }}
18
      whileTap={{ scale: 0.95 }}
19
      animate={{
20
        background: [
21
          'linear-gradient(135deg, #ff6b6b, #ff8e53, #ffcc00)',
22
          'linear-gradient(135deg, #42a5f5, #478ed1, #7b1fa2)',
23
          'linear-gradient(135deg, #00c9a7, #2ecc71, #ffeb3b)',
24
          'linear-gradient(135deg, #ff4081, #ff80ab, #f48fb1)',
25
          'linear-gradient(135deg, #8e44ad, #c0392b, #e74c3c)',
26
          'linear-gradient(135deg, #ffcc00, #ff5733, #ff1744)',
27
          'linear-gradient(135deg, #009688, #26c6da, #00e5ff)',
28
          'linear-gradient(135deg, #e91e63, #9c27b0, #673ab7)',
29
          'linear-gradient(135deg, #f57c00, #ffca28, #ffeb3b)',
30
          'linear-gradient(135deg, #00bcd4, #03a9f4, #1de9b6)'
31
        ],
32
        transition: { duration: 15, repeat: Infinity, repeatType: 'mirror' }
33
      }}
34
      className={`relative overflow-hidden rounded-lg border-none px-6 py-3 text-lg font-semibold text-white tracking-wide shadow-md transition-all duration-300 hover:bg-opacity-90 ${className}`}
35
    >
36
      <motion.div
37
        className="absolute inset-0 rounded-lg"
38
        animate={{
39
          boxShadow: [
40
            '0px 0px 10px rgba(255, 255, 255, 0.3)',
41
            '0px 0px 20px rgba(255, 255, 255, 0.6)',
42
            '0px 0px 10px rgba(255, 255, 255, 0.3)'
43
          ],
44
          transition: { duration: 2, repeat: Infinity, repeatType: 'mirror' }
45
        }}
46
      />
47
      <motion.span
48
        className="absolute inset-0"
49
        animate={{
50
          background: 'radial-gradient(circle, rgba(255,255,255,0.15) 20%, transparent 80%)',
51
          opacity: [0.5, 1, 0.5],
52
          transition: { duration: 2, repeat: Infinity, repeatType: 'mirror' }
53
        }}
54
      />
55
      <span className="relative z-10">{children}</span>
56
    </motion.button>
57
  );
58
};
59

60
export default AnimatedGradientButton;