CSS3 - Lollipop Click Effect

HTML

<br>
<center>
    <h2>Click on link to see effect</h2>
    <button class="nexus grey">Button 1</button><br/><br/>
</center>

CSS

@-webkit-keyframes clickeffect {
  from {
      width: 0;
      height: 0;
      margin-left: 0;
      margin-top: 0;
      opacity: 0.7;
  }
  to {
      width: 200px;
      height: 200px;
      margin-left: -100px;
      margin-top: -100px;
      opacity: 0;
  }
}
@keyframes clickeffect {
  from {
      width: 0;
      height: 0;
      margin-left: 0;
      margin-top: 0;
      opacity: 0.7;
  }
  to {
      width: 200px;
      height: 200px;
      margin-left: -100px;
      margin-top: -100px;
      opacity: 0;
  }
}

.nexusf{
  width: 200px;
  height: 50px;
  border: 0px;
  position: relative;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: lighter;
  font-size: 27px;
  color: #FFFFFF;
  background: #838383;
  cursor: pointer;
  overflow: hidden;
  padding: 8px;
  display: inline-block;
  text-decoration: none;
}
.effect {
  border-radius: 100%;
    position: absolute;
    background: rgba(255, 160, 0, 1);
    pointer-events: none;
    animation: clickeffect 1s ease-in-out;
    -webkit-animation: clickeffect 1s ease-in-out;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}

.nexus.grey {
  color: red;
  background: white;
}

JavaScript

var button = document.querySelectorAll('.nexus');
for (var i = 0; i < button.length; i++) {
  button[i].onmousedown = function(e) {

    var x = (e.offsetX == undefined) ? e.layerX : e.offsetX;
    var y = (e.offsetY == undefined) ? e.layerY : e.offsetY;
    var effect = document.createElement('div');
    effect.className = 'effect';
    effect.style.top = y + 'px';
    effect.style.left = x + 'px';
    var elem, evt = e ? e:event;
    if (evt.srcElement)  elem = evt.srcElement;
    else if (evt.target) elem = evt.target;  
    elem.appendChild(effect);
    setTimeout(function() {
      elem.removeChild(effect);
    }, 1000);
  }
}