<div>
立即预约
</div>
<style>
div{
cursor: pointer;
width: 180px;
height: 35px;
line-height: 35px;
text-align: center;
display: block;
margin: 0 auto;
border-radius: 5px;
font-size: 14px;
color: #fefefe;
background: linear-gradient( 90deg ,#f10d3b,#ff7445);
position: relative;
overflow: hidden;
}
div::after{
position: absolute;
left: -100%;
top: 0;
width: 35%;
height: 100%;
content: "";
background: linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0));
-ms-transform: skewX(-45deg);
transform: skewX(-45deg);
}
div:hover::after{
left: 150%;
transition: all 1s;
}
</style>