js-多个果冻按钮之当前果冻按钮弹性特效

先上静态截图（要用到TweenMax.js）：

HTML部分：

<div class="button">
  <p>点我</p>
</div>

CSS部分：

body {
  background-color: #e8e8e8;
  padding: 100px;
}
p{

  height:60px;
  text-align: center;
  color: white;
  font-size: 1.5rem;
}
.button {
  background: #3498db;
  width: 120px;
  height: 70px;
  line-height: 70px;
  /*padding:1% 0;*/
  border-radius: 10px;
}

.button:after {
  content: "";
  display: block;
  position: relative;
  width:100%;
  height: 10%;
  border-radius: 50%;
  background-color: #2a7aaf;
  opacity: 0.3;
  bottom: 5px;
}

JS部分：

  var $button = document.querySelectorAll('.button');
  for (var i = 0; i < $button.length; i++) {
    $button[i].addEventListener('click', function() {
      var duration = 0.3,
        delay = 0.08;
      TweenMax.to(this, duration, { scaleY: 1.6, ease: Expo.easeOut });
      TweenMax.to(this, duration, { scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay });
      TweenMax.to(this, duration * 1.25, {
        scaleX: 1,
        scaleY: 1,
        ease: Back.easeOut,
        easeParams: [6],
        delay: delay * 3
      });
    });
  }