Fire & Smoke Simulation Button — High-End Web Animation with Source Code
The Fire & Smoke Button is a premium interactive component that ignites on hover. It uses a high-performance particle system to simulate a realistic flame and gray smoke dispersion, creating a powerful “ignite” effect for call-to-action buttons.
How It Works
This animation is built using a combination of CSS for the button’s layout and glow, and HTML5 Canvas for the heavy-duty simulation. When the mouse enters the button’s area, “fire” particles are generated at the bottom. Each particle has properties like life, decay, velocity, and size. On click, the fire is “blown out,” and a grey “smoke” particle system is triggered for a cinematic finish.
Key Features
- Realistic Flame Simulation: Thousands of tiny particles with individual life cycles and colors.
- Dynamic Gaseous Smoke: High-fidelity smoke particles that drift upwards and dissipate.
- Interactive States: Differentiates between “Igniting” (hover) and “Extinguishing” (click) states.
- Aesthetic Glow: Uses CSS box-shadows and radial gradients for an atmospheric background.
Frequently Asked Questions
Is the simulation performance-heavy?
The simulation is optimized for canvas, but it does consume more CPU/GPU than a simple CSS animation. It’s best used for important “hero” buttons or in moderation across a page.
Can I change the button label?
Yes! Simply modify the text inside the <button> element in the HTML section.
How do I modify the flame color?
In the JavaScript Particle class, you can find the fillStyle logic in the draw() method. Changing the RGB values will result in different flame colors (e.g., blue flames or green magical fire).
