按钮效果：一闪而过
Sonder
2020-04-22
1499字
4分钟
浏览 (1.9k)
效果：
代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.cart_backToShop .cart_backToShop_box {
margin: 0 auto;
position: relative;
overflow: hidden;
text-align: center;
width: 100%;
height: 48px;
background-color: #19b99a;
border-radius: 5px;
line-height: 48px;
border: 1px solid #19b99a;
}
.cart_backToShop .cart_backToShop_box:after {
background: #fff;
content: '';
height: 155px;
left: -75px;
opacity: 0.2;
position: absolute;
top: -50px;
transform: rotate(35deg);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
width: 50px;
z-index: 10;
}
.cart_backToShop .cart_backToShop_box:hover:after {
left: 120%;
-webkit-transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
/*文字*/
.cart_backToShop .cart_backToShop_box #backToShop {
transition: 0.5s all;
position: relative;
display: block;
font-weight: 500;
cursor: pointer;
color: #fff;
letter-spacing: 0;
text-decoration: none;
}
</style>
</head>
<body>
<div class="cart_backToShop">
<div class="cart_backToShop_box">
<div id="backToShop">Keep Shopping</div>
</div>
</div>
</body>
</html>