这个效果是我从bootstrap-material-design上面分离下来的，bootstrap-material-design的一些组件样式我不太不喜欢，但是非常喜欢这个水波纹效果，所以就有了这篇文章：
先上效果图：
点击按钮后，会有一道波纹扩散开来
下面是资源地址：http://pan.baidu.com/s/1pL6LGBh
提取密码: 7y6x
就两文件：
下面是使用教程：
第一步：引入rippels.css 和rippels.js
<link rel="stylesheet" type="text/css" href="css/ripples.css"/>
<script src="js/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ripples.js" type="text/javascript" charset="utf-8"></script>
第二步：初始化
<script type="text/javascript">
$(function(){
$("button,a").ripples();
})
</script>
遇到的问题：波纹效果扩散出来了？？如下图：
给元素加上“position：relative”属性即可。
上面的案例是我正在做bootstrap UI 组件优化，引入了bootstrap的，博主亲测可用！