.ripple-btn {
    display: block;
    background: #FFF;
    /*
    width: 48px;
    height: 48px;
    line-height: 48px;
    */
    text-align: center;
    border-radius: 100%;
    box-sizing: border-box;
    color: #666;
    animation: at-ripple;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    overflow: hidden;
    border:0.1px solid white;
}
.ripple-btn.red {
    background: #dc3545;
    color:white;
    animation: at-ripple-pink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
}

@-webkit-keyframes at-ripple {
    0% {
        box-shadow: 0 4px 10px rgba(102, 102, 102, 0.3), 0 0 0 0 rgba(102, 102, 102, 0.3), 0 0 0 5px rgba(102, 102, 102, 0.3), 0 0 0 10px rgba(102, 102, 102, 0.3);
    }
    100% {
        box-shadow: 0 4px 10px rgba(102, 102, 102, 0.3), 0 0 0 5px rgba(102, 102, 102, 0.3), 0 0 0 10px rgba(102, 102, 102, 0.3), 0 0 0 20px rgba(102, 102, 102, 0);
    }
}
@keyframes at-ripple {
    0% {
        box-shadow: 0 4px 10px rgba(102, 102, 102, 0.3), 0 0 0 0 rgba(102, 102, 102, 0.3), 0 0 0 5px rgba(102, 102, 102, 0.3), 0 0 0 10px rgba(102, 102, 102, 0.3);
    }
    100% {
        box-shadow: 0 4px 10px rgba(102, 102, 102, 0.3), 0 0 0 5px rgba(102, 102, 102, 0.3), 0 0 0 10px rgba(102, 102, 102, 0.3), 0 0 0 20px rgba(102, 102, 102, 0);
    }
}
/* Pink Animate */
@-webkit-keyframes at-ripple-pink {
    0% {
        box-shadow: 0 4px 10px rgba(255, 65, 65, 0.3), 0 0 0 0 rgba(255, 65, 65, 0.3), 0 0 0 5px rgba(255, 65, 65, 0.3), 0 0 0 10px rgba(255, 65, 65, 0.3);
    }
    100% {
        box-shadow: 0 4px 10px rgba(255, 65, 65, 0.3), 0 0 0 5px rgba(255, 65, 65, 0.3), 0 0 0 10px rgba(255, 65, 65, 0.3), 0 0 0 20px rgba(255, 65, 65, 0);
    }
}
@keyframes at-ripple-pink {
    0% {
        box-shadow: 0 4px 10px rgba(255, 65, 65, 0.3), 0 0 0 0 rgba(255, 65, 65, 0.3), 0 0 0 5px rgba(255, 65, 65, 0.3), 0 0 0 10px rgba(255, 65, 65, 0.3);
    }
    100% {
        box-shadow: 0 4px 10px rgba(255, 65, 65, 0.3), 0 0 0 5px rgba(255, 65, 65, 0.3), 0 0 0 10px rgba(255, 65, 65, 0.3), 0 0 0 20px rgba(255, 65, 65, 0);
    }
}