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?
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":