我们韦蛾拆篮经常在电商网站或者其他网站看到，当鼠标移上去时，按钮能够悬浮起来的3D立体动效。那么我们来分享一下，如何利用css3简单快速的制作出这样的动画效果。
工具/原料
电脑
Hbuilder
方法/步骤
1、首先创建一个a标签，并定义class。这里把a标签当作按钮，因为这样的按钮往往会带有跳转链接，所以用a标签比较方便。后面也会做一个button按钮作比较
2、定义a标签按钮的样式，这次以这种样式为例，部分css代码带有注释。
3、运行，查看按钮效果。
4、接下来为按钮添加css3的动画属性。1.用h艺皱麾酪over伪类来定义鼠标移入后的样式。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标签达到完全一样的效果。
