html5 水波式按钮_css3+jQuery实现按钮水波纹效果

水波纹按钮

/*自定义按钮样式*/

.btns{

height: 30px;

line-height: 30px;

text-align: center;

width: 200px;

color: #fff;

background-color: #428bca;

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:.6;

background:#fff;

animation:waterBtn 3s;

-webkit-animation:waterBtn 3s; /* Safari and Chrome */

transform: translate(-50%, -50%) scale(1);

}

@keyframes w