codrops/ParticleEffectsButtons

Particle Effects for Buttons

Bursting particles effects for buttons. By Luis Manuel.

Article on Codrops

Demo

Credits

• anime.js

Basic usage

The Particles library depends on anime.js to perform animations, so you need to include it before Particles. Also, please make sure to include all the scripts at the end of the body element.

Then you can start disintegrating/integrating things like:

<!-- Normal HTML element to disintegrate -->
<button class="button">Button</button>

<script src="anime.min.js"></script>
<script src="dist/particles.min.js"></script>
<script>
    // Initialize a new instance of Particles to disintegrate/integrate the button
    var particles = new Particles('.button');

    // Disintegrate the button into particles
    particles.disintegrate();

    // particles.integrate(); // would do the opposite
</script>

Options

For customization, you can pass options to Particles constructor. That options will override the default values, and will be used for any future operation (disintegrate or integrate). You can also override the options for a specific operation. Here is the complete list of options available:

Wrapper for popular Javascript frameworks

Thanks to amazing contributors, the library can be used easily in the following popular Javascript frameworks:

• React: react-particle-effect-button, by Travis Fischer.
• Angular: angular-particle-effect-button, by Daniel Popa.
• Vue: vue-particle-effect-buttons, by Vincent Guo.

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Luis: Twitter, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

© Codrops 2018