Button wave animation, inspired by material design

button-waves.html

<button type="button" class="waves button" name="button">Button</button>

<style media="screen">

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

.waves{
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .waves .particle{
        transform: scale(0);
        background: rgba(0, 0, 0, 0.4);
        width: 0;
        height: 0;
        border-radius: 50%;
        position: absolute;
        opacity: 1;
        pointer-events: none;
    }

.animation{
    animation: ripple .5s linear;
}

</style>

<script type="text/javascript">

var waves = (function($) {

    var particle = '.particle';
    var template = '<span class="particle"></span>';
    var element = '.waves';

    $('body').delegate(element, 'click', animate);

    function animate(e) {
        var $this = $(this);

        $this.find(particle).remove();

        var width = $this.width() * 3;
        var height = $this.height() * 3;
        var posX = $this.offset().left;
        var posY = $this.offset().top;

        $this.prepend(template);

        if (width >= height)
            height = width;
        else
            width = height;

        var x = e.pageX - posX - width / 2;
        var y = e.pageY - posY - height / 2;

        $this.find(particle).css({
            width: width,
            height: height,
            top: y + 'px',
            left: x + 'px'
        }).addClass('animation');
    }

})(jQuery);

</script>