✨ added Eco Mode Button

Author: Ansub

src/app/(docs)/components/button/eco-mode-button/page.mdx

@@ -0,0 +1,9 @@
+export const metadata = {
+  title: 'Eco Mode Button',
+  description:
+    'A button that toggles between eco mode on and off. Built with Framer Motion and Tailwind CSS for projects using React or Next.js.',
+}
+
+<BackButton href="/components/button" />
+
+<ComponentPreview path="components/button/EcoModeButton" />

src/showcase/components/button/EcoModeButton.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { motion, useAnimation } from 'framer-motion'
+import { Leaf } from 'lucide-react'
+import { useState } from 'react'
+
+const EcoModeButton = () => {
+  const [isActivated, setIsActivated] = useState(false)
+  const leafControls = useAnimation()
+
+  const handleClick = async () => {
+    setIsActivated(!isActivated)
+    await leafControls.start({
+      scale: [1, 1.2, 1],
+      rotate: [0, 10, -10, 0],
+      transition: { duration: 0.5 },
+    })
+  }
+
+  return (
+    <motion.button
+      className="relative overflow-hidden rounded-full bg-red-500 px-4 py-3 text-sm font-medium text-white"
+      onClick={handleClick}
+      whileTap={{ scale: 0.95 }}
+    >
+      <motion.div
+        className="absolute inset-0 bg-green-600"
+        initial={{ scaleX: 0 }}
+        animate={{ scaleX: isActivated ? 1 : 0 }}
+        transition={{ duration: 0.5 }}
+        style={{ transformOrigin: 'left' }}
+      />
+      <motion.div className="relative z-10 flex items-center justify-center space-x-1">
+        <Leaf size={16} />
+        <span>{isActivated ? 'Eco Mode On' : 'Eco Mode Off'}</span>
+      </motion.div>
+      {isActivated && (
+        <motion.div
+          className="absolute inset-0 flex items-center justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.2 }}
+        >
+          {[...Array(20)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute h-1 w-1 rounded-full bg-green-200"
+              style={{
+                top: Math.random() * 100 + '%',
+                left: Math.random() * 100 + '%',
+              }}
+              animate={{
+                y: [0, -20, 0],
+                opacity: [0, 1, 0],
+              }}
+              transition={{
+                duration: Math.random() * 2 + 1,
+                repeat: Infinity,
+                delay: Math.random() * 2,
+              }}
+            />
+          ))}
+        </motion.div>
+      )}
+    </motion.button>
+  )
+}
+
+export default EcoModeButton

src/showcase/ui-group/ButtonCards.tsx

@@ -12,7 +12,8 @@ import MagneticButton from '../components/button/MagneticButton'
 import StarWarsButton from '../components/button/StarWarsButton'
 import TextRevealButton from '../components/button/TextRevealButton'
 import Card from './Card'
-import RotatingCompleteButton from '@/showcase/components/button/3DButton'
+import RotatingCompleteButton from '@/showcase/components/button/RotatingCompleteButton'
+import EcoModeButton from '../components/button/EcoModeButton'
 
 const data = [
   {
@@ -61,6 +62,11 @@ const data = [
     link: '/components/button/rotating-complete-button',
     component: <RotatingCompleteButton />,
   },
+  {
+    title: 'Eco Mode',
+    link: '/components/button/eco-mode-button',
+    component: <EcoModeButton />,
+  },
   {
     title: 'Bounce',
     link: '/components/button/bounce-button',