原文链接
https://github.com/XboxYan/no…
按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？
通常这类效果第一反应可能就是借助
canvas 了，比如下面这个 案例
效果就更加震撼了，当然
canvas 实现也有一定的门槛，而且实际使用起来也略微麻烦（所有
js 实现的通病），这里尝试一下
CSS 的实现方式。生成粒子
抛开
js 方案，还有
HTML 和
CSS 实现方式。
HTML 就不用说了，直接写上大量的标签
<button>
button
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
...
</button>一般情况下我不是很喜欢这种方式，标签太多，结构不美观，而且有可能对现有的页面造成其他影响（很多情况下并不方便修改原始
HTML 结构）那么来看看
CSS 实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是
box-shadow ，还有一个是
background-image （CSS3支持无限叠加）。1.box-shadow
我们先看看
box-shadow 方式，为了避免使用额外标签，这里采用伪元素生成。
.button::before{
position: absolute;
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ff0081;
box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*无限叠加*/
}
效果还是有的，主要就是多花点时间来调试，这里主要根据偏移量和扩展来决定粒子的位置和大小。
不过这里的偏移量只能是
px 单位，无法很好的自适应按钮的大小，所以这里采用第二种方式来实现2.background-image
CSS3中
background-image 是可以无限叠加的，类似于
