<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)
})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.