查看更多按钮效果

按钮效果如下

more.gif

首先HTML部分

 <a href="#" class="more">more<i class="fa fa-long-arrow-right"></i></a>

CSS部分

<style>
        .more {
            position: relative;
            display: inline-block;
            width: 130px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            color: #a8001c;
            background: #fff;
            box-shadow: 0 0 10px rgba(12, 3, 6, .13);
            z-index: 1;
            text-decoration: none;
        }
    
        .more i {
            position: relative;
            float: right;
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            background: #a8001c;
            color: #ffffff;
            font-size: 15px;
            z-index: 1;
        }
        .more:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background: #a8001c;
            transition: ease-out .35s;
            z-index: -1;
        }
        .more i:after { /*这里不可以用before伪元素，因为字体图标是在before的content中定义的*/
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 0;
            height: 100%;
            background: #fff;
            transition: ease-in .65s;
            z-index: -1;
        }
        .more:hover {
            color: #fff;
        }
    
        .more:hover:before {
            width: 100%;
        }
    
        .more:hover i {
            color: #a8001c;
            transition-delay: .2s;
        }
    
        .more:hover i:after {
            width: 100%;
            transition-delay: .2s;
            transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
        }
    </style>

注意：

• 字体图标的before伪元素不要操作，因为里面的content定义了字体图标的内容
• z-index的应用也要注意，不然文字会被覆盖掉