Need ripple button with pure html & css with perfectly wave from clicked pointer

Question

I want a ripple button with pure HTML and CSS program (must not include with js/vanilla or any other language) . So this is what I made. But the wave is not starting from the point I click. How can I solv it?

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple {
  background-position: center;
  transition: background .6s;
  position: absolute;
}

.ripple:hover {
  background-color: var(--btn-secoundary-color);
  background-image: radial-gradient(circle, transparent 1%, var(--btn-primary-color) 1%);
  background-position: center;
  background-size: 15000%;
}

.ripple:active {
  transition: background 0s;
  background-color: var(--btn-secoundary-color);
  background-size: 100%;
}

 :root {
  --btn-primary-color: #ff3434;
  --btn-secoundary-color: #b61601;
}

<button class="ripple">Button</button>

Can you help me?

Answer 1

Have many elements that cover the button. These would act as "hit detection" boxes that each individually animate the ripple when clicked. Here, each element is 10% width and height "granularity":

button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--btn-primary-color);
  box-shadow: 0 2px 4px #bbb;
  outline: none;
  color: white;
  position: relative;
  overflow: hidden;
}

.ripple {
  transition: background .6s;
  position: absolute;
}

.ripple:hover {
  background-color: var(--btn-secoundary-color);
}

.ripple:active {
  transition: background 0s;
  background-color: var(--btn-primary-color);
}

 :root {
  --btn-primary-color: #ff3434;
  --btn-secoundary-color: #b61601;
}

.ripple-effect {
  background-position: center;
  transition:
    background-size 0.6s,
    opacity .6s,
    top 0s .6s,
    left 0s .6s,
    width 0s .6s,
    height 0s .6s,
    transform 0s .6s;
  position: absolute;
  width: 10%;
  height: 10%;
  background-position: center;
  background-image: radial-gradient(circle, transparent 1%, var(--btn-primary-color) 1%);
  background-size: 5000%;
  opacity: 0;
}

.ripple .ripple-effect:active {
  background-size: 0%;
  width: 300%;
  height: 300%;
  transform: translate(-50%, -50%);
  transition-duration: 0s;
  transition-delay: 0s;
  opacity: 1;
}

<button class="ripple">
  <span style="position: relative; z-index: 1; pointer-events: none">Button</span>
  <div class="ripple-effect" style="top:0%; left:0"></div>
  <div class="ripple-effect" style="top:0%; left:10%"></div>
  <div class="ripple-effect" style="top:0%; left:20%"></div>
  <div class="ripple-effect" style="top:0%; left:20%"></div>
  <div class="ripple-effect" style="top:0%; left:30%"></div>
  <div class="ripple-effect" style="top:0%; left:40%"></div>
  <div class="ripple-effect" style="top:0%; left:50%"></div>
  <div class="ripple-effect" style="top:0%; left:60%"></div>
  <div class="ripple-effect" style="top:0%; left:70%"></div>
  <div class="ripple-effect" style="top:0%; left:80%"></div>
  <div class="ripple-effect" style="top:0%; left:90%"></div>
  <div class="ripple-effect" style="top:10%; left:0"></div>
  <div class="ripple-effect" style="top:10%; left:10%"></div>
  <div class="ripple-effect" style="top:10%; left:20%"></div>
  <div class="ripple-effect" style="top:10%; left:20%"></div>
  <div class="ripple-effect" style="top:10%; left:30%"></div>
  <div class="ripple-effect" style="top:10%; left:40%"></div>
  <div class="ripple-effect" style="top:10%; left:50%"></div>
  <div class="ripple-effect" style="top:10%; left:60%"></div>
  <div class="ripple-effect" style="top:10%; left:70%"></div>
  <div class="ripple-effect" style="top:10%; left:80%"></div>
  <div class="ripple-effect" style="top:10%; left:90%"></div>
  <div class="ripple-effect" style="top:20%; left:0"></div>
  <div class="ripple-effect" style="top:20%; left:10%"></div>
  <div class="ripple-effect" style="top:20%; left:20%"></div>
  <div class="ripple-effect" style="top:20%; left:20%"></div>
  <div class="ripple-effect" style="top:20%; left:30%"></div>
  <div class="ripple-effect" style="top:20%; left:40%"></div>
  <div class="ripple-effect" style="top:20%; left:50%"></div>
  <div class="ripple-effect" style="top:20%; left:60%"></div>
  <div class="ripple-effect" style="top:20%; left:70%"></div>
  <div class="ripple-effect" style="top:20%; left:80%"></div>
  <div class="ripple-effect" style="top:20%; left:90%"></div>
  <div class="ripple-effect" style="top:30%; left:0"></div>
  <div class="ripple-effect" style="top:30%; left:10%"></div>
  <div class="ripple-effect" style="top:30%; left:20%"></div>
  <div class="ripple-effect" style="top:30%; left:20%"></div>
  <div class="ripple-effect" style="top:30%; left:30%"></div>
  <div class="ripple-effect" style="top:30%; left:40%"></div>
  <div class="ripple-effect" style="top:30%; left:50%"></div>
  <div class="ripple-effect" style="top:30%; left:60%"></div>
  <div class="ripple-effect" style="top:30%; left:70%"></div>
  <div class="ripple-effect" style="top:30%; left:80%"></div>
  <div class="ripple-effect" style="top:30%; left:90%"></div>
  <div class="ripple-effect" style="top:40%; left:0"></div>
  <div class="ripple-effect" style="top:40%; left:10%"></div>
  <div class="ripple-effect" style="top:40%; left:20%"></div>
  <div class="ripple-effect" style="top:40%; left:20%"></div>
  <div class="ripple-effect" style="top:40%; left:30%"></div>
  <div class="ripple-effect" style="top:40%; left:40%"></div>
  <div class="ripple-effect" style="top:40%; left:50%"></div>
  <div class="ripple-effect" style="top:40%; left:60%"></div>
  <div class="ripple-effect" style="top:40%; left:70%"></div>
  <div class="ripple-effect" style="top:40%; left:80%"></div>
  <div class="ripple-effect" style="top:40%; left:90%"></div>
  <div class="ripple-effect" style="top:50%; left:0"></div>
  <div class="ripple-effect" style="top:50%; left:10%"></div>
  <div class="ripple-effect" style="top:50%; left:20%"></div>
  <div class="ripple-effect" style="top:50%; left:20%"></div>
  <div class="ripple-effect" style="top:50%; left:30%"></div>
  <div class="ripple-effect" style="top:50%; left:40%"></div>
  <div class="ripple-effect" style="top:50%; left:50%"></div>
  <div class="ripple-effect" style="top:50%; left:60%"></div>
  <div class="ripple-effect" style="top:50%; left:70%"></div>
  <div class="ripple-effect" style="top:50%; left:80%"></div>
  <div class="ripple-effect" style="top:50%; left:90%"></div>
  <div class="ripple-effect" style="top:60%; left:0"></div>
  <div class="ripple-effect" style="top:60%; left:10%"></div>
  <div class="ripple-effect" style="top:60%; left:20%"></div>
  <div class="ripple-effect" style="top:60%; left:20%"></div>
  <div class="ripple-effect" style="top:60%; left:30%"></div>
  <div class="ripple-effect" style="top:60%; left:40%"></div>
  <div class="ripple-effect" style="top:60%; left:50%"></div>
  <div class="ripple-effect" style="top:60%; left:60%"></div>
  <div class="ripple-effect" style="top:60%; left:70%"></div>
  <div class="ripple-effect" style="top:60%; left:80%"></div>
  <div class="ripple-effect" style="top:60%; left:90%"></div>
  <div class="ripple-effect" style="top:70%; left:0"></div>
  <div class="ripple-effect" style="top:70%; left:10%"></div>
  <div class="ripple-effect" style="top:70%; left:20%"></div>
  <div class="ripple-effect" style="top:70%; left:20%"></div>
  <div class="ripple-effect" style="top:70%; left:30%"></div>
  <div class="ripple-effect" style="top:70%; left:40%"></div>
  <div class="ripple-effect" style="top:70%; left:50%"></div>
  <div class="ripple-effect" style="top:70%; left:60%"></div>
  <div class="ripple-effect" style="top:70%; left:70%"></div>
  <div class="ripple-effect" style="top:70%; left:80%"></div>
  <div class="ripple-effect" style="top:70%; left:90%"></div>
  <div class="ripple-effect" style="top:80%; left:0"></div>
  <div class="ripple-effect" style="top:80%; left:10%"></div>
  <div class="ripple-effect" style="top:80%; left:20%"></div>
  <div class="ripple-effect" style="top:80%; left:20%"></div>
  <div class="ripple-effect" style="top:80%; left:30%"></div>
  <div class="ripple-effect" style="top:80%; left:40%"></div>
  <div class="ripple-effect" style="top:80%; left:50%"></div>
  <div class="ripple-effect" style="top:80%; left:60%"></div>
  <div class="ripple-effect" style="top:80%; left:70%"></div>
  <div class="ripple-effect" style="top:80%; left:80%"></div>
  <div class="ripple-effect" style="top:80%; left:90%"></div>
  <div class="ripple-effect" style="top:90%; left:0"></div>
  <div class="ripple-effect" style="top:90%; left:10%"></div>
  <div class="ripple-effect" style="top:90%; left:20%"></div>
  <div class="ripple-effect" style="top:90%; left:20%"></div>
  <div class="ripple-effect" style="top:90%; left:30%"></div>
  <div class="ripple-effect" style="top:90%; left:40%"></div>
  <div class="ripple-effect" style="top:90%; left:50%"></div>
  <div class="ripple-effect" style="top:90%; left:60%"></div>
  <div class="ripple-effect" style="top:90%; left:70%"></div>
  <div class="ripple-effect" style="top:90%; left:80%"></div>
  <div class="ripple-effect" style="top:90%; left:90%"></div>
</button>