/* Ripple effect */
.ripple {
    background-position: center;
    transition: background 0.5s;
}

.ripple:hover {
    background: #f3f3f3 radial-gradient(circle, transparent 1%, #d9d9d9 1%) center/15000%;
}

.ripple:active {
    background-color: linear-gradient(to top right, #9010df8d, #bb03f897);
    background-size: 100%;
    transition: background 0s;
}