时间：2021-07-01 10:21:17 帮助过：5人阅读
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>