.has-ripple {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.ripple {
    display: block;
    position: absolute;
    pointer-events: none;
    border-radius: 50%;

    -webkit-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);

    background: #fff;
    opacity: 1;
}

.ripple-animate {
    -webkit-animation: ripple;
    -o-animation: ripple;
    animation: ripple;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        transform: scale(2);
    }
}

@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2);
        transform: scale(2);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2);
    }
}