1 @-webkit-keyframes waterripple {
 2                 0% {
 3                     box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7);
 4                     background: rgba(66, 166, 223, 0.7);
 5                 }
 6                 100% {
 7                     box-shadow: 0 0 0 300px rgba(66, 166, 223, 0);
 8                     background: rgba(66, 166, 223, 0);
 9                 }
10             }        
11             .btn {
12                 width: 100px;
13                 height: 40px;
14                 text-align: center;
15                 line-height: 40px;
16                 border-radius: 5px;
17                 background: skyblue;
18                 position: relative;
19                 overflow: hidden;
20                 margin: 20px;
21                 float:left;
22             }
23             
24             .wave {
25                 display: inline-block;
26                 width:50px;
27                 height: 50px;
28                 border-radius: 100%;
29                 position: absolute;
30                 margin-top: -25px;
31                 margin-left: -25px;
32                 animation: waterripple .3s ease-in-out both 1;
33                 -webkit-animation: waterripple .3s ease-in-out both 1;
34                 background: rgba(66, 166, 223, 0);
35             }

$("document").ready(function() {
                $(".btn").bind(‘click‘, function(e) {
                    
                    var me=$(this);
                    var X = e.pageX - $(this).offset().left;
                    var Y = e.pageY - $(this).offset().top;
                    
                    me.append(‘<span class="wave" style="left:‘+X+‘;top:‘+Y+‘;"></span>‘);                    
                    
                    setTimeout(function(){
                       me.find(‘.wave‘).remove()
                    },300);
                })
            });