Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Exploding Green Button</title> | |
| <style> | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| background: #1a1a2e; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| overflow: hidden; | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .green-btn { | |
| background-color: #28a745; | |
| color: #ffffff; | |
| border: none; | |
| padding: 12px 24px; | |
| font-size: 16px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease, transform 0.1s ease; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .green-btn:hover { | |
| background-color: #1e8a36; | |
| } | |
| .green-btn:active { | |
| transform: scale(0.96); | |
| } | |
| .green-btn.exploded { | |
| animation: buttonShake 0.4s ease; | |
| } | |
| @keyframes buttonShake { | |
| 0%, 100% { transform: translate(0, 0); } | |
| 20% { transform: translate(-3px, 2px) rotate(-2deg); } | |
| 40% { transform: translate(3px, -2px) rotate(2deg); } | |
| 60% { transform: translate(-2px, 3px) rotate(-1deg); } | |
| 80% { transform: translate(2px, -3px) rotate(1deg); } | |
| } | |
| .particle { | |
| position: fixed; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 999; | |
| } | |
| .flash { | |
| position: fixed; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 998; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <button class="green-btn" id="btn" onclick="explode(event)">Click Me</button> | |
| </div> | |
| <script> | |
| function explode(e) { | |
| const btn = document.getElementById('btn'); | |
| const rect = btn.getBoundingClientRect(); | |
| const cx = rect.left + rect.width / 2; | |
| const cy = rect.top + rect.height / 2; | |
| // Shake the button | |
| btn.classList.add('exploded'); | |
| setTimeout(() => btn.classList.remove('exploded'), 400); | |
| // Flash effect | |
| const flash = document.createElement('div'); | |
| flash.className = 'flash'; | |
| flash.style.left = (cx - 30) + 'px'; | |
| flash.style.top = (cy - 30) + 'px'; | |
| flash.style.width = '60px'; | |
| flash.style.height = '60px'; | |
| flash.style.background = 'radial-gradient(circle, rgba(64,255,128,0.8) 0%, rgba(40,167,69,0.4) 40%, transparent 70%)'; | |
| flash.style.transition = 'transform 0.3s ease, opacity 0.3s ease'; | |
| flash.style.transform = 'scale(1)'; | |
| flash.style.opacity = '1'; | |
| document.body.appendChild(flash); | |
| requestAnimationFrame(() => { | |
| flash.style.transform = 'scale(6)'; | |
| flash.style.opacity = '0'; | |
| }); | |
| setTimeout(() => flash.remove(), 300); | |
| // Particle burst | |
| const colors = ['#28a745', '#4caf50', '#81c784', '#a5d6a7', '#00e676', '#69f0ae', '#b9f6ca', '#c8e6c9']; | |
| const numParticles = 40; | |
| for (let i = 0; i < numParticles; i++) { | |
| const p = document.createElement('div'); | |
| p.className = 'particle'; | |
| const angle = (Math.PI * 2 * i) / numParticles + (Math.random() - 0.5) * 0.4; | |
| const speed = 80 + Math.random() * 220; | |
| const dx = Math.cos(angle) * speed; | |
| const dy = Math.sin(angle) * speed; | |
| const size = 4 + Math.random() * 12; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| const duration = 600 + Math.random() * 500; | |
| p.style.left = cx + 'px'; | |
| p.style.top = cy + 'px'; | |
| p.style.width = size + 'px'; | |
| p.style.height = size + 'px'; | |
| p.style.background = color; | |
| p.style.transition = `transform ${duration}ms cubic-bezier(0.15, 0.85, 0.4, 1), opacity ${duration}ms ease`; | |
| p.style.transform = 'translate(-50%, -50%) scale(1)'; | |
| p.style.opacity = '1'; | |
| document.body.appendChild(p); | |
| requestAnimationFrame(() => { | |
| p.style.transform = `translate(calc(-50% + ${dx}px), calc(-50% + ${dy}px)) scale(0)`; | |
| p.style.opacity = '0'; | |
| }); | |
| setTimeout(() => p.remove(), duration); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |