原文链接
github.com/XboxYan/not…

按钮（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是可以无限叠加的，类似于

.myclass { background: background1, background2, /*...*/ backgroundN; }

 

这里我们可以给与径向渐变radial-gradient来实现多个小圆点。

.button::before{ position: absolute; content: ‘‘; left: -2em; right: -2em; top: -2em; bottom: -2em; pointer-events: none; background-repeat: no-repeat; background-image: radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), radial-gradient(circle, #ff0081 20%, transparent 0), ...; background-size: 10% 10%, 20% 20%, 15% 15%,...; background-position: 18% 40%, 20% 31%, 30% 30%,...; }