用CSS实现花里胡哨的按钮切换效果

前言

关于button的，无论是样式还是动画，各路大神都在分享这自己的创意，而在button动画中，边框滚动的效果，我觉得是最好

的。虽说是button的动画，其实这种动画效果，不仅仅局限在button上。在边框滚动动画上，主要是有下面三种，

前提

这三种边框滚动动画，

1. 本人都是利用伪元素::after和::before实现的，当然也可以不用伪元素，套一层div， 不过我个人觉得比较复杂，考虑的也比较多。

2. 这里button的边框不是利用border实现的，而是利用box-shadow实现的，因为在保证button和:after/before创建的，可以和按钮宽高保持一致。如果使用border的话，不小心的话，滚动的边框就会在在里面。类似这种：