img

按钮效果:一闪而过

2020-04-22 0条评论 1.6k次阅读 CSS


效果:

3.gif

代码:

<!DOCTYPE html>
<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>

运行实例:
http://jsrun.net/A4fKp/edit

💬 COMMENT


🦄 支持markdown语法

👋友