按钮垂直居中_css3流光按钮制作

就是写一个按钮，添加上渐变背景，然后给这个按钮外层用伪元素有套了一个盒子，这个盒子和按钮一样的渐变背景，给这个盒子背景虚化(边框光效果)，把这个盒子层级放在按钮底下，再把按钮和盒子的背景放大，鼠标一上去的时候，让按钮和外层盒子都做背景位置移动的动画即可。

技术点在于：先把背景放大，才能用背景位置移动。不放大背景，移动无效：

利用这个，可以做背景位置垂直效果移动(下雨，下雪等效果)。

Background-size：‘200%’；

Background-position：-200% ；

1.   先写一个按钮设置300px宽，100px高，添加一个渐变背景(第一个颜色和最后一个颜色要相同才能连在一起)。里面填上文字，文字水平垂直居中，再把这个按钮水平居中。

2.  给按钮div添加一个伪元素，通过定位和上下左右值(负值)，伪元素绝对定位，那么div父级就要设置相对定位，让这个伪元素盖在div上面，为了看清楚先添加一个边框。

3.  给这个伪元素添加和按钮div一样的渐变背景，把这个背景用filter模糊。

4.  此时伪元素盖住了按钮div，所以通过层级z-index把伪元素调到div底下去。

5.  此时，效果已经出来，但是不动，那么就给按钮div添加一个让渐变背景位置不

断向左移动的动画即可。

此时发现不动，因为背景就那么大，必须要先把背景放大，才能移动。

6. 用background-size = “300%”先把背景放大，然后再用动画移动背景位置即可.

7. 此时已经开始动了，但是外面的伪元素虚化的不动，因为没有添加动画，所以给伪元素也添加上这个动画。

到此，流光按钮完成。