<div class="Button-wrapper">
  <button class="Button">Deploy</button>
</div>

<!-- symbols -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="donut" viewBox="0 0 14 14">
    <path fill="#F4157E" fill-rule="nonzero" d="M7 12c2.76 0 5-2.24 5-5S9.76 2 7 2 2 4.24 2 7s2.24 5 5 5zm0 2c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
  </symbol>
  
  <symbol id="circle" viewBox="0 0 10 10">
    <circle cx="5" cy="5" r="5" fill="#F4157E" fill-rule="evenodd"/>
  </symbol>
  
  <symbol id="tri_hollow" viewBox="0 0 12 11">
    <path fill="#F4157E" fill-rule="nonzero" d="M3.4 8.96h5.2L6 4.2 3.4 8.95zM6 0l6 11H0L6 0z"/>
  </symbol>
  
  <symbol id="triangle" viewBox="0 0 10 9">
    <path fill="#F4157E" fill-rule="evenodd" d="M5 0l5 9H0"/>
  </symbol>
  
  <symbol id="square" viewBox="0 0 8 8">
    <path fill="#F4157E" fill-rule="evenodd" d="M0 0h8v8H0z"/>
  </symbol>
  
  <symbol id="squ_hollow" viewBox="0 0 8 8">
    <path fill="#F4157E" fill-rule="nonzero" d="M1.5 1.5v5h5v-5h-5zM0 0h8v8H0V0z"/>
  </symbol>
</svg>

// =========
// Variables
// =========
$off_white:   #F8FAFF;
$bright_pink: #F4157E;
$dull_pink:   #CD106E;

// =========
// Codepen Setup
// =========
html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  background: $off_white;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}

// ===============
// Relative parent
// ===============
.Button-wrapper {
  position: relative;
}

// ===========
// The button!
// ===========
.Button {
  font-family: "Gilroy ExtraBold", system-ui, sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 22px;
  line-height: 68px;
  text-transform: uppercase;
  background: $bright_pink;
  color: $off_white;
  appearance: none;
  border: none;
  border-radius: 10px;
  min-width: 200px;
  padding: 0 24px;
  box-shadow: 0 10px 60px -10px $dull_pink;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  user-select:none;
  transform-style: preserve-3d;
  transform: perspective(250px) scale3d(1,1,1);
  transition: all 1s cubic-bezier(0.03,0.98,0.52,0.99);
  will-change: transform, box-shadow, background;
  outline: none;
  position: relative;
  z-index:2;
  
  &:hover {
    background: lighten($bright_pink, 2%);
    box-shadow: 0 8px 65px -5px $dull_pink;
  }
  
  &:active {
    background: $dull_pink;  
    box-shadow: 0 10px 60px -10px $dull_pink;
    transform: perspective(250px) scale3d(1, 1, 1) translateY(5%) !important;
  }
}

// ===========
// SVG symbols
// ===========
.Symbol {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: -1;
  animation: explode .8s reverse forwards ease-in;
}

// =========
// Animation
// =========
@keyframes explode {
  from { opacity: 0; }
  to {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}

// tilt.js
$('.Button').tilt({ scale: 1.1, speed: 1000 });

// click event
$('.Button').on('click', function(e) {
  explode(e.pageX, e.pageY);
});

document.addEventListener("touchstart", function(){}, true);

// symbols
function explode(x, y) {
  
  var symbolArray = [
    '#donut',
    '#circle',
    '#tri_hollow',
    '#triangle',
    '#square',
    '#squ_hollow'
  ];
  
  var particles = 10, 
      explosion = $('.Button-wrapper');
      
  for (var i = 0; i < particles; i++) {
    
    var randomSymbol = Math.floor(Math.random()*symbolArray.length);
    // positioning x,y of the particles
    var x = (explosion.width() / 2) + rand(80, 150) * Math.cos(2 * Math.PI * i / rand(particles - 10, particles + 10)),
        y = (explosion.height() / 2) + rand(80, 150) * Math.sin(2 * Math.PI * i / rand(particles - 10, particles + 10)),
        deg = rand(0, 360) + 'deg',
        scale = rand(0.5, 1.1),
        // particle element creation
        elm = $(
          '<svg class="Symbol" style="top:' + y + 'px; left:' + x + 'px; transform: scale(' + scale + ') rotate(' + deg + ');">' + 
          '<use xlink:href="' + symbolArray[randomSymbol] + '" />' + 
          '</svg>'
         );

    if (i == 0) { // only need to target one of the symbols.
      // css3 animation end detection
      elm.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
        elm.siblings('svg').remove().end().remove(); // remove particles when animation is over.
      });
    }
    explosion.prepend(elm);
  }
}

function rand(min, max) {
  return Math.floor(Math.random() * (max + 1)) + min;
}