<h3>Effect A</h3>
<div class="button-wrap">
  <button class="button button-effect-a"><span class="button_text">PLAY</span></button>
  <button class="button button-effect-a"><span class="button_text">STOP</span></button>
  <button class="button button-effect-a"><span class="button_text">PAUSE</span></button>
</div>

<h3>Effect B</h3>
<div class="button-wrap">
  <button class="button button-effect-b"><span class="button_text">PLAY</span></button>
  <button class="button button-effect-b"><span class="button_text">STOP</span></button>
  <button class="button button-effect-b"><span class="button_text">PAUSE</span></button>
</div>

<h3>Effect C</h3>
<div class="button-wrap">
  <button class="button button-effect-c"><span class="button_text">PLAY</span></button>
  <button class="button button-effect-c"><span class="button_text">STOP</span></button>
  <button class="button button-effect-c"><span class="button_text">PAUSE</span></button>
</div>

<h3>Effect D</h3>
<div class="button-wrap">
  <button class="button button-effect-d"><span class="button_text">PLAY</span></button>
  <button class="button button-effect-d"><span class="button_text">STOP</span></button>
  <button class="button button-effect-d"><span class="button_text">PAUSE</span></button>
</div>

<p>
  <a href="https://tympanus.net/Development/ClickEffects/" target="_blank">
    Reference <strong>tympanus.net</strong>
  </a>
</p>

body {
  background-color:#1C3646;
  margin:1.5em;
}
a {
  color:#fff;
  font-size:0.8em;
}
h3 {
  display:block;
  margin:0;
  text-align:center;
  font-family:verdana;
  color:#16242F;
  font-size:1.7em;
}
.button-wrap {
  padding:1em;
  text-align:center;
}
.button {
  position:relative;
  display:inline-block;
  margin:1em;
  padding:0;
  border:0;
  background:none;
  color:#286aab;
  font-size:1.2em;
  font-family:'arial black';
  transition:color 0.7s;
  cursor:pointer;
}
.button.button-click,
.button:focus {
  outline:none;
  color:#3c8ddc;
}
.button:after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  margin:-35px 0 0 -35px;
  width:70px;
  height:70px;
  border-radius:50%;
  opacity:0;
}
/* effect a */
.button-effect-a:after {
  background:rgba(111,148,182,0.1);
}
.button-effect-a.button-click:after {
  -webkit-animation:anim-effect-a 0.3s forwards;
}

@-webkit-keyframes anim-effect-a {
  0% {
    -webkit-transform:scale3d(0.3,0.3,1);
  }
  25%,50% {
    opacity:1;
  }
  100% {
    opacity:0;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
}

/* effect b */
.button-effect-b:after {
  width:50px; height:50px;
  border:10px solid rgba(111,148,182,0.1);
}
.button-effect-b.button-click:after {
  -webkit-animation:anim-effect-b 0.3s forwards;
}

@-webkit-keyframes anim-effect-b {
  0% {
    -webkit-transform:scale3d(0.3,0.3,1);
  }
  25%,50% {
    opacity:1;
  }
  100% {
    opacity:0;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
}

/* effect c */
.button-effect-c:after {
  background:rgba(111,148,182,0.3);
}
.button-effect-c.button-click:after {
  -webkit-animation:anim-effect-c 0.5s forwards;
}

@-webkit-keyframes anim-effect-c {
  0% {
    opacity:1;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
  100% {
    opacity:0;
    -webkit-transform:scale3d(0.3,0.3,1);
  }
}

/* effect d */
.button-effect-d:after {
  background:rgba(111,148,182,0.3);
}
.button-effect-d.button-click:after {
  -webkit-animation:anim-effect-d 0.5s forwards;
}

@-webkit-keyframes anim-effect-d {
  0% {
    opacity:1;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
  100% {
    opacity:0;
    -webkit-transform:scale3d(1.2,1.2,1);
  }
}

$("button").on("click",function(){
  $(this).addClass("button-click");
})

$("button").on("webkitAnimationEnd",function(){
  $(this).removeClass("button-click");
})