CSS ripple effect

// SASS
.ripple
    width: 0
    height: 0
    border-radius: 50%
    background: rgba(255, 255, 255, 0.4)
    transform: scale(0)
    position: absolute
    opacity: 1

.rippleEffect
    animation: rippleDrop .6s linear

@keyframes rippleDrop
    100%
        transform: scale(2)
        opacity: 0

// JS
        $('.effectR').click(function(e){
            $(".ripple").remove();

            var posX = $(this).offset().left,
                posY = $(this).offset().top,
                buttonWidth = $(this).width(),
                buttonHeight =  $(this).height();

            $(this).prepend("<span class='ripple'></span>");
            if(buttonWidth >= buttonHeight) {
                buttonHeight = buttonWidth;
            } else {
                buttonWidth = buttonHeight; 
            }

            var x = e.pageX - posX - buttonWidth / 2;
            var y = e.pageY - posY - buttonHeight / 2;

            $(".ripple").css({
                width: buttonWidth,
                height: buttonHeight,
                top: y + 'px',
                left: x + 'px'
            }).addClass("rippleEffect");
        })