HTML/CSS - Ripple Effect Button Online Editor and JavaScript Compiler

html

<!DOCTYPE html> 
<html lang="en"> 
<head> <meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Button</title> 
</head> 
<body> 
<!--Made By Harshit Srivastava--> 
<div class="button">Button 1</div> 
<div class="button">Button 2</div> 
</body> 
<!--Made By Harshit Srivastava--> 
<script> 
var btn = document.querySelectorAll(".button");
btn.forEach(b => { b.addEventListener("click", function(e){ 
    let x = e.clientX - b.getBoundingClientRect().left; 
    let y = e.clientY - b.getBoundingClientRect().top; 
    let ripples = document.createElement("span");
    ripples.style.left = x + "px";
    ripples.style.top = y + "px";
    b.appendChild(ripples); 
    setTimeout(()=>{ 
    ripples.remove(); 
    }, 1000) 
    }) 
    }) 
</script> 
<!--Made By Harshit Srivastava--> 

css

/*Made By Harshit Srivastava*/ 
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); 
* { 
    margin: 0; 
    padding:0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    box-sizing: border-box; 
    font-family: itim; 
    font-weight: bold; 
} 
body { 
    background-color: black; 
    color: white; 
    min-height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.button { 
    user-select: none; 
    padding: 25px; 
    width: 150px; 
    margin: 10px; 
    position: relative; 
    text-transform: uppercase; 
    cursor: pointer; 

BROWSER

Console