基础理解2:CSS3按钮动画
一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现：
1、伪类需要position定位，相对的button也需要定位一下
2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可
3、transition实现动画效果，如果需要transform旋转一下
效果如下：
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> button:hover:after { width: 100%; } button:hover { color: #000; } button:after { content: ''; background-color: #fff; transition: all .5s; width: 0%; position: absolute; top: 3px; left: 0px; height: 34px; z-index: -1; } button { width: 100px; height: 40px; border: 0px; color: white; background-color: red; font-size: 16px; position: relative; z-index: 1; cursor: pointer; font-family: 'Microsoft YaHei'; } </style> </head> <body> <button> 保存 </button> </body> </html>
