一个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>
时间： 2024-11-02 21:36:52