.ripple {
    background-position: center;
    transition: background 0.4s;
}
/* e8ebfe 0521cf */
/* rgba(2,28,126,1) rgba(5,33,207,1) */
.ripple:hover {
    background: rgba(2,28,126,0.8) radial-gradient(circle, rgba(2,28,126,1) 1%, transparent 1%) center/15000%;
}

.ripple:active {
    background-size: 100%;
    transition: background 0s;
}

.ripple2 {
    background-position: center;
    transition: background 0.4s;
}
/* e8ebfe 0521cf */

.ripple2:hover {
    background: rgba(248,114,46,0.1) radial-gradient(circle, rgba(248,114,46,0.5) 1%, transparent 1%) center/15000%;
}

.ripple2:active {
    background-size: 100%;
    transition: background 0s;
}