<!DOCTYPE html>
<html>

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Button Ripple Effects</title>
<link rel="stylesheet" href="style.css">

<body>
    <a href="#">Button</a>
    <a href="#">Button</a>
<script type="text/javascript">

    const buttons = document.querySelectorAll('a');
    buttons.forEach(btn => {
        btn.addEventListener('click', function(e){

            let x = e.clientX - e.target.offsetLeft;
            let y = e.clientY - e.target.offsetTop;

            let ripples = document.createElement('span');
            ripples.style.left = x + 'px';
            ripples.style.top = y+ 'px';
            this.appendChild(ripples);
            
            setTimeout(()=> {
                ripples.remove()
            },1000);
        })
    })
</script>
</body>
</html>
*{

margin: 0;
padding: 0;
font-family: sans-serif;

}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background: #040d15;
}
a{
    position: relative;
    display: inline-block;
    padding: 12px 36px;
    margin: 10px 0;
    color:#fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 3px;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(90deg,#0162c8,#55e7fc);

}
a:nth-child(2) {
    background: linear-gradient(90deg,#755bea,#ff72c0);
}

span {
    position: absolute;
    background: #fff;
    transform: translate(-50%,-50%);
    pointer-events: none;
    border-radius: 50%;
    animation: animate 1s linear infinite;
}

@keyframes animate {

    0% {
        width: 0px;
        height: 0px;
        opacity: 0.5;
    }
    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.