js点击按钮button效果（波效果）

html部分：　

　　<button data-ripple>　Demo button 6 </button>

css部分：

　　.ripple-container {}

　　.ripple-container .ripple {
　　　　background-color: rgba(255, 255, 255, 0.4);
　　　　animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
　　}

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

js部分：

　　<script type="text/javascript">
　　　　Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
　　　　　　new RippleEffect(element);
　　　　});
　　</script>

完整demo：　

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ripple.css" />
<style>
button{
outline: none;
border: none;
cursor: pointer;
}
button {
background-color: #3e3e3e;
padding: 5px 30px;
font: 14px/30px "微软雅黑";
color: #fff;
display: block;
border-bottom: 1px solid #ccc;
}
button:hover{
background-color: #525252;
}
</style>
</head>

<body>
<button data-ripple>
Demo button 1
</button>
<button data-ripple>
Demo button 2
</button>
<button data-ripple>
Demo button 3
</button>
<button data-ripple>
Demo button 4
</button>
<button data-ripple>
Demo button 5
</button>
<button data-ripple>
Demo button 6
</button>
</body>
<script src="ripple.js"></script>
<script>
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element) {
new RippleEffect(element);
});
</script>
<script>
var btns = document.querySelectorAll("button");
var len = btns.length;
for(var i=0; i<len; i++){
btns[i].index = i;
btns[i].onclick = function(){
//console.log(this.index);
for(var j=0; j<len; j++){
btns[j].style.background = "#3e3e3e";
}
this.style.background = "#b63745";
}
}
</script>
</html>