Pure CSS button ripple effect without JS

It is a pure CSS button with a ripple effect Without any JS code and this ripple effect we can apply on any element like the body, buttons, links, and any element where you want to show the ripple effect.

HTML

<button class="ripple-btn">Click Me</button>

CSS

body {
  background-color: #00838F;
}
button {
    border: none;
    border-radius: 6px;
    padding: 18px 60px;
    font-size: 25px;
    cursor: pointer;
    background-color: #FF9800;
    color: #fff;
    margin: 10% auto;
    display: block;
}
.ripple-btn {
    transition: background 1s;
}
.ripple-btn:hover {
    background-image: radial-gradient(circle, transparent 1%, #FF9800 1%);
    background-position: center;
    background-size: 15000%;
}
.ripple-btn:active {
    transition: background 0s;
    background-color: #FFEB3B;
    background-size: 100%;
}