Particle Effects for Buttons

Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.

The inspiration for this idea came from Cuberto’s Hyperloop interface shot, Route Selection UI.

The demo is kindly sponsored by Segment: One API, 200+ tools, no more integrations.
If you would like to sponsor one of our demos, find out more here.

The animations are powered by anime.js. Here’s an example of how you can use it:

<!-- 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>

We hope you enjoy this and find it useful!

References and Credits

• anime.js