JS Button style wave view

//Html markup
<button class="cr-btn"><span>Subscribe now</span></button>
//CSS

.cr-btn {
    position: relative;
    overflow: hidden;
    border: 1px solid pink;
    background-color: pink;
    color: #fff;
    padding: 10px 20px;
}
.cr-btn span {
    z-index: 2;
    color: #fff;
    position: relative;
}
a.cr-btn b,
button.cr-btn b {
    background: rgba(25, 25, 25, 1) none repeat scroll 0 0;
    border-radius: 50%;
    bottom: 0;
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-in-out 0s, height 0.6s ease-in-out 0s;
    width: 0;
    z-index: 1;
}
a.cr-btn:hover b,
button.cr-btn:hover b {
    height: 500px;
    width: 500px;
}
//Js
    function buttonEffect() {
        $('<b></b>').appendTo('.cr-btn');
        $('.cr-btn')
            .on('mouseenter', function(e) {
                var parentOffset = $(this).offset(),
                    relX = e.pageX - parentOffset.left,
                    relY = e.pageY - parentOffset.top;
                $(this).find('b').css({
                    top: relY,
                    left: relX
                });
            })
            .on('mouseout', function(e) {
                var parentOffset = $(this).offset(),
                    relX = e.pageX - parentOffset.left,
                    relY = e.pageY - parentOffset.top;
                $(this).find('b').css({
                    top: relY,
                    left: relX
                });
            });
        $('[href="#"]').on('click', function() {
            return true;
        });
    }
    buttonEffect();