Radial Click Effect

Demo

CSS

/*
@import url('https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap');
* {
  font-family: 'Red Hat Display', sans-serif;
}
*/
.ripplelink{
  display:block;
  float:left;
  width:49.6%;
  margin:0.2%;
  height:10em;
  line-height:10em;
  text-align:center;
  color:#fff;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition: all 0.2s ease;
  z-index:0;
}

.ink {
  display: block;
  position: absolute;
  background:rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  transform:scale(0);
}

.animate {
  animation:ripple 0.65s linear;
}

@keyframes ripple {
    100% {opacity: 0; transform: scale(2.5);}
}


.cyan{
  background:#00bcd4;
}

.lightgreen{
  background:#8bc34a;
}

.amber{
  background:#ffc107;
}

.orange{
  background:#ff9800;
}

JS

var links = document.querySelectorAll('.ripplelink');

for (var i = 0, len = links.length; i < len; i++) {
  links[i].addEventListener('click', function(e) {
    var targetEl = e.target;
    var inkEl = targetEl.querySelector('.ink');

    if (inkEl) {
      inkEl.classList.remove('animate');
    }
    else {
      inkEl = document.createElement('span');
      inkEl.classList.add('ink');
      inkEl.style.width = inkEl.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px';
      targetEl.appendChild(inkEl);
    }

    inkEl.style.left = (e.offsetX - inkEl.offsetWidth / 2) + 'px';
    inkEl.style.top = (e.offsetY - inkEl.offsetHeight / 2) + 'px';
    inkEl.classList.add('animate');
  }, false);
}

HTML

<a class="btn ripplelink cyan" href="#!">Hover & Click me!</a>
  <a class="btn ripplelink lightgreen" href="#!">Hover & Click me!</a>
  <a class="btn ripplelink amber" href="#!">Hover & Click me!</a>
  <a class="btn ripplelink orange" href="#!">Hover & Click me!</a>

Working Result

Click the buttons to see the click effect.