首先搭建结构。按钮整体用一个盒子div承载，设置类名为btns，每个按钮用a标签。弥散阴影和小箭头我们使用伪元素:before和:after去制作。
书写css样式，实体化a标签作为按钮，添加渐变背景色。
弥散阴影使用伪元素:before实体化定位制作，注意背景颜色继承父元素，层级设置为-1在按钮的下方，添加filter:blur(5px)滤镜属性设置投影为高斯模糊并且调整定位坐标向下。
样式书写完毕，按钮的静态效果已经实现，如下图所示。
添加鼠标移上小箭头出现移动效果。
小箭头我们使用伪元素:after去制作。设置小箭头默认透明度opacity:0，鼠标移上设置透明度为1，显示小箭头，注意添加transition过渡会有淡入显示视觉效果。
鼠标移上a设置:after添加animation动画控制水平位移transform:translateX()。
添加小箭头后，鼠标移上效果如下图。
添加线框滑动效果。这个效果需要在a标签内部添加四个span定位并实体化，背景颜色继承父元素，层级z-index设置为-1在按钮的下方，并且给线框设置四个不同方向的位移，把线框移动到按钮外面。
线框实体化后效果如下图。
设置线框初始不透明度为0，鼠标移上按钮a，把线框位移回原来的位置transform:translate(0,0)，并且把不透明的设置为1，添加过渡效果transition。
最终效果如下图。
不知道大家有没有发现，这两年有一种特别通明透亮的阴影形式在平面以及UI设计领域广泛流行这种阴影较PS图层样式中的投影而言多了一些视觉上的真实感和空间美感，阴影细节更为丰富，因此深受设计师广泛追捧
那么话不多说，马上开始我们的教程！
（新手朋友们要记住想用弥散阴影的话，先别用直角，稍微几像素的圆角或直接圆角矩形做出来的效果更好看）
（这里注意！和直接添加投影样式的区别就在这里了：一定要把B等比例缩小一些！）
（喜欢的朋友也可以加个1像素的白色投影之类的样式，丰富细节）
我们可以发挥创意，运用弥散阴影技巧设计出更多有意思的小部件，并且完美运用~~
喜欢上这种弥散阴影的风格后，相信聪明的你还能设计衍变出更多风格的弥散阴影，看完文章自己动手试一试才能领悟到其中的奥妙哦！
阴影现在分两种。
1，你可以在图层样式里面有一个投影，你添加数值，就能做出阴影了。
2，最新很多喜欢做弥散阴影，如下效果：
制作教程：
第一步、以界面中的圆角矩形按钮来做案例，先画个500*100的圆角矩形，色值#52ca7a，得到一个圆角矩形，我命名为：学UI设计网【圆角】
（朋友们要记住想用弥散阴影，先别用直角，圆角做出来的效果更好看）
第二步、ctrl+j快捷键复制学UI设计网【圆角】得到学UI设计网【阴影】，这里和直接在图层样式中添加投影样式的区别就在这里了：必须要把学UI设计网【阴影】等比例缩小一些！然后透明度设40%左右，并向下移动15px左右（这些数值仅供参考，具体自己把握，方法是死的，人是活的，另外记得把学UI设计网【阴影】图层移到学UI设计网【圆角】下方）
第三步、点开PS工具栏中的窗口-属性-蒙板，设置羽化为10左右，就这样一个最最简单的弥散阴影就做出来啦！！
是不是很简单，我们可以发挥创意，运用弥散阴影技巧设计出更多有意思的小部件，并且完美运用~~
