1import React from "react";
2    import { motion } from "framer-motion";
3    
4    const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
5      <div className="flex flex-wrap gap-4 justify-center items-center py-10 bg-gradient-to-b from-gray-900 to-black min-h-screen">
6        {children}
7      </div>
8    );
9    
10    const baseBtn =
11      "relative px-6 py-3 rounded-xl font-semibold transition-all duration-300 focus:outline-none";
12    
13    return function AnimatedButton() {
14      return (
15        <ButtonWrapper>
16          {/* Gradient Button */}
17          <motion.button
18            whileHover={{ scale: 1.05, y: -3 }}
19            whileTap={{ scale: 0.95, y: 0 }}
20            className={`${baseBtn} bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg hover:shadow-2xl`}
21          >
22            Gradient Magic
23          </motion.button>
24    
25          {/* Neon Glow Button */}
26          <motion.button
27            whileHover={{
28              scale: 1.08,
29              textShadow: "0 0 8px #00ffff",
30              boxShadow: "0 0 20px #00ffff",
31            }}
32            whileTap={{ scale: 0.95 }}
33            className={`${baseBtn} border-2 border-cyan-400 text-cyan-300 bg-transparent hover:bg-cyan-900/20`}
34          >
35            Neon Glow
36          </motion.button>
37    
38          {/* Glassmorphic Button */}
39          <motion.button
40            whileHover={{
41              scale: 1.04,
42              backdropFilter: "blur(20px)",
43              backgroundColor: "rgba(255,255,255,0.2)",
44            }}
45            whileTap={{ scale: 0.95 }}
46            className={`${baseBtn} text-white border border-white/30 backdrop-blur-md bg-white/10 hover:bg-white/20`}
47          >
48            Glassmorphic
49          </motion.button>
50    
51          {/* 3D Press Button */}
52          <motion.button
53            whileHover={{ y: -3 }}
54            whileTap={{ y: 2, boxShadow: "0 0 0 #000" }}
55            className={`${baseBtn} bg-amber-500 text-white shadow-[0_5px_0px_rgba(0,0,0,0.4)] hover:shadow-[0_2px_0px_rgba(0,0,0,0.4)]`}
56          >
57            3D Press
58          </motion.button>
59    
60          {/* Ripple Button */}
61          <motion.button
62            whileTap={{ scale: 0.97 }}
63            onClick={(e) => {
64              const ripple = document.createElement("span");
65              ripple.className = "absolute bg-white/40 rounded-full animate-ping";
66              const rect = e.currentTarget.getBoundingClientRect();
67              ripple.style.left = `${e.clientX - rect.left - 10}px`;
68              ripple.style.top = `${e.clientY - rect.top - 10}px`;
69              ripple.style.width = ripple.style.height = `20px`;
70              e.currentTarget.appendChild(ripple);
71              setTimeout(() => ripple.remove(), 500);
72            }}
73            className={`${baseBtn} overflow-hidden bg-emerald-600 text-white relative hover:bg-emerald-700`}
74          >
75            Ripple Effect
76          </motion.button>
77    
78          {/* Ghost Button */}
79          <motion.button
80            whileHover={{ scale: 1.06, borderColor: "#fff", color: "#fff" }}
81            whileTap={{ scale: 0.95 }}
82            className={`${baseBtn} border-2 border-gray-500 text-gray-300 bg-transparent hover:bg-white/10`}
83          >
84            Ghost Button
85          </motion.button>
86        </ButtonWrapper>
87      );
88    }
89