这是一款Material Design风格按钮点击波动画效果。该按钮设计在用户点击按钮时，按钮上会产生各种流光动画效果，非常炫酷。

使用方法

在页面中引入style.css文件。

<link rel="stylesheet" href="css/style.css">
                

HTML结构

该Material Design风格按钮点击波动画效果中的按钮使用<div>作为HTML结构。

<div class="btn wave left">点击按钮</div>   
                

为<div>元素添加相应的class类，即可生成对应的按钮点击波动画效果。

<p>Wave animation</p>
<div class="btn wave left">点击按钮</div>

<p>Slow stroke animation</p>
<div class="btn half-stroke left">点击按钮</div>

<p>Normal stroke animation</p>
<div class="btn stroke left">点击按钮</div>

<p>Middle bubble animation</p>
<div class="btn bubble left">点击按钮</div>

<p>Wave animation</p>
<div class="btn wave right">点击按钮</div>

<p>Slow stroke animation</p>
<div class="btn half-stroke right">点击按钮</div>

<p>Normal stroke animation</p>
<div class="btn stroke right">点击按钮</div>
                

对于按钮的外观和颜色，可以通过sass文件来修改：

/* transition conf */
$duration: 0.75s;
$transition-style: ease-in-out;

/* colors */
$light-blue: rgb(52, 152, 219);
$light-green: rgb(46, 204, 113);
$light-red: rgb(231, 76, 60);
$light-turquoise: rgb(26, 188, 156);
$dark-blue: rgb(41, 128, 185);
$dark-green: rgb(39, 174, 96);

/* btn conf */
$btn-width: 200px;
$btn-padding: 20px;                  
                

在线预览    源码下载