<button class="play-a">Burst A</button>
<button class="play-b">Burst B</button>
<button class="play-c">Burst C</button>
<button class="play-d">Burst D</button>
<button class="play-e">Burst E</button>
<div class="container">
</div>
body {
  margin: 20px auto;
  font-family: "Lato";
  font-weight: 300;
  width: 600px;
  font-size: 1.3em;
  text-align: center;
}

.container {
  perspective: 100px;
  height: 300px;
}

button {
  background: orange;
  border: none;
  color: white;
  font-family: 'Lato';
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  margin: 10px 2px;
  font-weight: 300;
}
var burstA = new mojs.Burst({
  count: 20
});

var burstB = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: 10
});

var burstC = new mojs.Burst({
  angle: {
    0: 360
  },
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstD = new mojs.Burst({
  degree: 180,
  radiusX: 10,
  angle: -90,
  scale: {
    1: 2
  },
  radius: {
    10: 100
  }
});

var burstE = new mojs.Burst({
  count: 20,
  degree: 3600
});

document.querySelector(".play-a").addEventListener("click", function() {
  burstA.play();
});

document.querySelector(".play-b").addEventListener("click", function() {
  burstB.play();
});

document.querySelector(".play-c").addEventListener("click", function() {
  burstC.play();
});

document.querySelector(".play-d").addEventListener("click", function() {
  burstD.play();
});

document.querySelector(".play-e").addEventListener("click", function() {
  burstE.play();
});

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.2/mo.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js