按钮特效制作细节，可扩展使用_内附源码
今天聊聊CSS3特效对于按钮特效细节制作过程，文末附优化方案，让你学得会，懂原理 。制作储备css3基本属性如下：
线性渐变：linear-gradient；
图片大小设置属性：background-size；
绝对定位：position: absolute;
伪类元素：before；
设置水平方向的位置：background-position-x
；过滤器：filter；透明度：opacity；
过渡动画：transition。
这里默认是在你都掌握以上CSS属性的前提下进行以下开发工作。
第一步创建HTML文件并设置body样式和基本按钮标签
在任何浏览器中打开刚刚新建的HTML文件。
第二步 设置按钮基本样式
这里按钮用a标签代替的，所以设置a标签的基本样式，具体属性看下方源码，注意这里认为你是有基础的，所以不赘述基本属性作用。其中linear-gradient表示线性渐变，用于作为按钮背景图片使用，起始角度是90deg，共四种渐变颜色，默认会从左向右进行颜色渐变排列，利用绝对定位把盒子居中显示于页面。
如下图所示，按钮基本样式完成，但颜色之前没有模糊过渡效果。原因是背景图片默认大小充满父盒子，也就是撑满a标签默认宽高。
对症下药，把按钮的背景放大到400%，渐变颜色就会被放大400%，颜色之间的过渡就被放大，只能看到一种颜色或者两种颜色了，在按钮基础样式后面添加属性。
效果如下图所示。
第三步 增加按钮背景动画，让背景图片动起来
接着上面的css代码继续往下补充如下代码，设置按钮水平方向位置background-position-x的值在补间动画内，从0%到100%，0%的时候是background-position-x：0%，100%的时候是background-position-x：100%。
此时，看浏览器效果如下。
第四步 创建外围光影效果
这里利用伪类元素before来完成。继续追加css代码如下，给按钮伪类元素before设置基本属性，设置绝对定位居中，层级为-1，透明度是1，注意，这里的背景颜色和按钮保持一致，顺序一致，角度一致。
效果如下
可以看到伪类元素盖住了按钮背景，文字模糊了，此时设置伪类元素透明度为0，并添加鼠标经过属性，增加伪类元素模糊程度blur（20px），动画使用和按钮一样的动画函数即可，透明度设置为0.7或者其他值都可以。
最终效果出来了，恭喜你完成css特效按钮制作全过程。
附源码
有疑问的地方，评论区留言。
