我们经常在电商网站或者其他网站看到，当鼠标移上去时，按钮能够悬浮起来的3D立体动效。那么我们来分享一下，如何利用css3简单快速的制作出这样的动画效果。
工具/原料
1
电脑
2
Hbuilder
方法/步骤
1
首先创建一个a标签，并定义class。这里把a标签当作按钮，因为这样的按钮往往会带有跳转链接，所以用a标签比较方便。后面也会做一个button按钮作比较
2
定义a标签按钮的样式，这次以这种样式为例，部分css代码带有注释。
3
运行，查看按钮效果。
4
接下来为按钮添加css3的动画属性。 1.用hover伪类来定义鼠标移入后的样式。2.本例是以margin来改变a标签按钮的属性，从而达到动画的效果。如果在某个div或其他容器里面，可以通过改变position的相对定位和绝对定位来制作上移或下移的动画效果。3.transform来定义动画的属性，此处只用了过渡时间和过渡速度曲线两个属性，还有其他属性可参考css3手册。4.利用鼠标移到按钮上时为其添加阴影，即box-shadow来增强3D立体感，使漂浮感更逼真。
5
运行，查看动画效果。
6
如果直接用表单中的button按钮来制作此动效，会是什么效果呢。那么接下来先创建一个button按钮，为其定义与上面a标签一样的class。
7
运行，查看两个对比效果。可以看到，相同的css样式，button会有其自带的边框，与a标签略微不同，那么接下来我们利用为button定义的id来修改一下这些属性。
8
将边框的颜色与其自身的颜色相同。将鼠标移到button上的光标样式改为手性，即pointer。
9
运行，查看最终效果。可以发现，在略微调整之后，button可以和a标签达到完全一样的效果。
注意事项
大家可以利用这一个例子中的方法，来制作更多按钮的动效，充分发挥你们的想象，从这些细节中，让你们做出来的网页更佳出众。
上一篇：css中float用法