首先搭建结构。按钮整体用一个盒子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。
最终效果如下图。
这个箭头就是CSS3做的，需要现代浏览器支持。鼠标移动上去就是:hover 伪类样式控制的。
左右滑动需要JS支持。
demo：http://www.jq22.com/demo/960f34b4-5478-11e4-9736-00163e001348/
