Added Fizzy Button Rakesh9100#1381*

slavidsa · Oct 12, 2024 · 23c3a29 · 23c3a29
1 parent 56ef9a3
commit 23c3a29
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 0 deletions.
diff --git a/Components/Buttons/Fizzy Button/index.html b/Components/Buttons/Fizzy Button/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Extra Fizzy Button</title>
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-color: #2b2d42;
+      margin: 0;
+      overflow: hidden;
+    }
+
+    .fizzy-button {
+      font-size: 20px;
+      color: #fff;
+      background-color: #f72585;
+      border: none;
+      padding: 15px 30px;
+      border-radius: 50px;
+      cursor: pointer;
+      position: relative;
+      z-index: 2;
+      box-shadow: 0 8px 25px rgba(247, 37, 133, 0.5);
+      transition: background-color 0.3s ease;
+    }
+
+    .fizzy-button:hover {
+      background-color: #ff4d6d;
+    }
+
+    .fizzy-button:active {
+      background-color: #b5179e;
+    }
+
+    .particle {
+      position: absolute;
+      background-color: #ff5722;
+      border-radius: 50%;
+      pointer-events: none;
+      animation: fizz 2s ease-out forwards;
+      z-index: 1;
+    }
+
+    @keyframes fizz {
+      from {
+        transform: scale(0);
+        opacity: 1;
+      }
+      to {
+        transform: scale(3);
+        opacity: 0;
+      }
+    }
+  </style>
+</head>
+<body>
+  <button class="fizzy-button">Click Me!</button>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
+  <script>
+    const button = document.querySelector('.fizzy-button');
+
+    button.addEventListener('click', () => {
+      const particleCount = 100;  // Large number of particles for extra fizz
+      const bodyRect = document.body.getBoundingClientRect();
+
+      for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('particle');
+        particle.style.width = particle.style.height = `${Math.random() * 15 + 5}px`;
+        particle.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 50%)`;
+
+        // Particles can appear anywhere on the screen
+        particle.style.left = `${Math.random() * window.innerWidth}px`;
+        particle.style.top = `${Math.random() * window.innerHeight}px`;
+
+        document.body.appendChild(particle);
+
+        gsap.to(particle, {
+          x: (Math.random() - 0.5) * 1000,  // Bigger spread for a wider fizz effect
+          y: (Math.random() - 0.5) * 1000,
+          duration: 2,
+          opacity: 0,
+          scale: Math.random() * 2.5 + 1,
+          onComplete: () => particle.remove(),
+        });
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/assets/html_files/buttons.html b/assets/html_files/buttons.html
@@ -128,6 +128,19 @@ <h1>3D Button-2</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Fizzy Button</h1>
+                <div class="preview">
+                    <a href="../../Components/Buttons/FizzyButton/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Buttons/3D-Button-2" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>Bat Button</h1>
                 <div class="preview">