html5 水波式按钮_js点击按钮实现水波纹效果代码（CSS3和Canves）

近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题)

先看看效果吧，如下图(录制gif软件有点渣，看起来卡卡的...)

这种效果可以由元素内嵌套canves实现，也可以由css3实现。

Canves实现

网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下

html代码：Press me!

css代码：

* {

box-sizing: border-box;

outline: none;

}

body {

font-family: 'Open Sans';

font-size: 100%;

font-weight: 300;

line-height: 1.5em;

text-align: center;

}

.btn {

border: none;

display: inline-block;

color: white;

overflow: hidden;

margin: 1rem;

padding: 0;

width: 150px;

height: 40px;

text-align: center;

line-height: 40px;

border-radius: 5px;

}

.btn.color-1 {

background-color: #426fc5;

}

.btn-border.color-1 {

background-color: transparent;

border: 2px solid #426fc5;

color: #426fc5;

}

.material-design {

position: relative;

}

.material-design canvas {

opacity: 0.25;

position: absolute;

top: 0;

left: 0;

}

.container {

align-content: center;

align-items: flex-start;

display: flex;

flex-direction: row;

flex-wrap: wrap;

justify-content: center;

margin: 0 auto;

max-width: 46rem;

}

js代码 ：

var c