效果展示
实现思路:
- 定义好一个按钮
- 然后定义一个伪元素
:after相同大小的盒子采用的父相子绝 定位 - 默认初始伪元素的盒子的宽的
Width:0%; 盒子的颜色为随便填写就行,别跟过渡之后的一样就行 - 当给
button添加hover的时候伪元素的盒子的宽度改为父级的100%,颜色改为其他颜色即可 - 因为需要动画过渡效果,我们再给伪元素添加一个
transition: all 0.8s;属性,令元素属性过渡更加丝滑
注意:
因为伪元素的层级在button上面,会盖住字体,所以我们要设置伪元素的层级
z-index: -999;
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
}
button {
position: relative;
width: 150px;
height: 50px;
font-size: 20px;
background-color: transparent;
border-radius: 10px;
cursor: pointer;
}
button:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: orange;
z-index: -999;
transition: all 0.8s;
border-radius: 10px;
}
button:hover:after {
width: 100%;
background: #3b8d99;
}
</style>
</head>
<body>
<button>
<span>Hover Me</span>
</button>
</body>
</html>
