body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Roboto", san-seriff;
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  flex-direction: column;
}

.form-group {
  position: relative;
  padding: 20px 0;
  width: 300px;
  max-width: 100%;
}

.form-group input {
  background: #ebedee;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  color: #333;
  padding: 10px 0;
  width: 100%;
  font-size: 16px;
  display: block;
}

.form-group label {
  color: #9e9e9e;
  font-size: 16px;
  font-weight: 100;
  position:  absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translateY(30px);
  transition: all 0.2s ease-in-out;
}

.form-group input:valid,
.form-group input:focus {
  outline: none;
  border-bottom-color: #ee6e73;
}

.form-group input:valid + label,
.form-group input:focus + label {
  transform: translateY(0);
  font-size: 14px;
  color: #ee6e73;
}

button {
  background-color: crimson;
  color: #fff;
  padding: 13px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-top: 15px;
  font-size: 20px;
  border-radius: 5px;
  outline: none;
  position: relative;
  overflow: hidden;
}

button:hover {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4),
    1px 3px 3px rgba(0,0,0, 0.7);
}

button:active {
  box-shadow: none;
}

button .circle {
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) scale(0);
  animation: scale 0.5s ease-out;
}

@keyframes scale {
    to {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

const button = document.querySelector("button");

button.addEventListener("click", (e) => {
  let x = e.clientX;
  let y = e.clientY;
  
  let buttonTop = e.target.offsetTop;
  let buttonLeft = e.target.offsetLeft;
  
  let xInside = x - buttonLeft;
  let yInside = y - buttonTop;
  
  console.log(xInside);
  console.log(yInside);
  
  let circle = document.createElement("span");
  circle.classList.add("circle");
  circle.style.top = yInside + "px";
  circle.style.left = xInside + "px";
  button.appendChild(circle);
});