<div id="wrapper">
  <a href="#" class="material-ripple">Click Me!</a>
  <a href="#" class="material-ripple" data-color="ff99ff">Custom Color</a>
</div>
@keyframes materialRipple {
    0% {
        transform: translate(-50%, -50%) scale(1)
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--material-scale));
        opacity: 0
    }
}

.material-ripple {
    position: relative;
    overflow: hidden;
  
    /* Additional */
    display: inline-block;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent
}

.material-ripple .animate {
    width: 2px;
    height: 2px;
    position: absolute;
    border-radius: 50%;
    animation: materialRipple 0.5s linear
}

/* Additional */
@font-face{font-family:DungGeunMo;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff) format('woff');font-weight:400;font-style:normal}

body {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  justify-content: center;
  align-items: center;
  background: #e1e1e1;
  overflow: hidden;
  font-family: 'DungGeunMo', sans-serif
}
#wrapper {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}
Array.from(document.querySelectorAll(".material-ripple")).forEach(a => {
    a.addEventListener("click", function (e) {
        const ripple = document.createElement("div"),
            rect = a.getBoundingClientRect();
        ripple.className = "animate",
        ripple.style.left = `${e.x - rect.left}px`,
        ripple.style.top = `${e.y - rect.top}px`,
        ripple.style.background = `#${a.dataset.color !== undefined ? a.dataset.color : "bdc3c7"}`,
        ripple.style.setProperty("--material-scale", a.offsetWidth),
        a.append(ripple),
        setTimeout(function () {
            ripple.parentNode.removeChild(ripple)
        }, 500)
    })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.