首先奉上css代码

.btns{
    height: 200px;
    line-height: 200px;
    text-align: center;
    width: 200px;
    border-radius: 100%;
    color: #fff;
    background-color: #666;
    margin: 50px auto;
}   

.water-btn{
    position: relative;
    overflow: hidden;
}
.wb-click{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    top:0px;
    left: 0px;
}
.water-btn .wb-world{
    position: relative;;
    z-index: 1;
}
.water-btn .water-btn-style{
    position:absolute;
    border-radius:100%;
    opacity:.4;
    background:#66666;
    animation:waterBtn 5s;
    -webkit-animation:waterBtn 5s; 
    transform: translate(-50%, -50%) scale(1);
}

@keyframes waterBtn
{
    0% {
        width:0px;
        height:0px;
    }
    50% {
        width:1000px;
        height:1000px;
        opacity:0
    }
    100%{
        opacity:0
    }
}

@-webkit-keyframes waterBtn /* Safari and Chrome */
{
    0% {
        width:0px;
        height:0px;
    }
    50% {
        width:1000px;
        height:1000px;
        opacity:0
    }
    100%{
        opacity:0
    }
}

html 代码

<div class="water-btn btns" data-clickColor="pink">
    <div class="wb-world">水波波</div>
</div>

Js代码

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
    $('.water-btn').click(function(e){
        var _this = $(this);
        var px = e.offsetX;
        var py = e.offsetY;

        var id=parseInt(Math.random()*1000);
        _this.append('<div class="water-btn-style" style="top:'+py+'px;left:'+px+'px;background:'+_this.attr('data-clickColor')+'" id="wb_'+id+'"></div>');
        setTimeout(function(){
            _this.find('#wb_'+id).remove()
        },3000)
    });
});
</script>

不用谢不用谢 拿去拿去