coolbtn.css 的备份

@import url(font-awesome.min.css);

#wrap {

    margin: 18px auto

}

.btn-slide,.btn-slide2 {

    position: relative;

    display: inline-block;

    margin: 10px;

    padding: 0;

    width: 200px;

    height: 50px;

    border: 2px solid #fa7298;

    border-radius: 50px;

    background: #fdfdfd;

    line-height: 50px;

    transition: .5s

}

.btn-slide2 {

    border: 2px solid #00cccb

}

.btn-slide:hover {

    background-color: #fa7298

}

.btn-slide2:hover {

    background-color: #00cccb

}

.btn-slide:hover span.circle,.btn-slide2:hover span.circle2 {

    right: 100%;

    margin-right: -45px;

    background-color: #fdfdfd;

    color: #fa7298

}

.btn-slide2:hover span.circle2 {

    color: #00cccb

}

.btn-slide:hover span.title,.btn-slide2:hover span.title2 {

    right: 40px;

    opacity: 0

}

.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2 {

    right: 75px;

    opacity: 1

}

.btn-slide span.circle,.btn-slide2 span.circle2 {

    position: absolute;

    top: -2.5px;

    right: 0;

    float: right;

    display: block;

    margin: 5px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #fa7298;

    color: #fff;

    text-align: center;

    font-size: 16px;

    line-height: 42px;

    transition: .5s

}

.btn-slide2 span.circle2 {

    background-color: #00cccb

}

.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2 {

    position: absolute;

    right: 90px;

    margin: 0 auto;

    color: #fa7298;

    text-align: center;

    font-weight: 700;

    font-size: 16px;

    transition: .5s

}

.btn-slide2 span.title2,.btn-slide2 span.title-hover2 {

    right: 80px;

    color: #00cccb

}

.btn-slide span.title-hover,.btn-slide2 span.title-hover2 {

    right: 80px;

    opacity: 0

}

.btn-slide span.title-hover,.btn-slide2 span.title-hover2 {

    color: #fff

}

.btn-slide3,.btn-slide4 {

    position: relative;

    display: inline-block;

    margin: 10px;

    padding: 0;

    width: 200px;

    height: 50px;

    border: 2px solid #888;

    border-radius: 50px;

    background: #fdfdfd;

    line-height: 50px;

    transition: .5s

}

.btn-slide4 {

    border: 2px solid #afaae7

}

.btn-slide3:hover {

    background-color: #888

}

.btn-slide4:hover {

    background-color: #afaae7

}

.btn-slide3:hover span.circle3,.btn-slide4:hover span.circle4 {

    left: 100%;

    margin-left: -45px;

    background-color: #fdfdfd;

    color: #888

}

.btn-slide4:hover span.circle4 {

    color: #afaae7

}

.btn-slide3:hover span.title3,.btn-slide4:hover span.title4 {

    left: 40px;

    opacity: 0

}

.btn-slide3:hover span.title-hover3,.btn-slide4:hover span.title-hover4 {

    left: 75px;

    opacity: 1

}

.btn-slide3 span.circle3,.btn-slide4 span.circle4 {

    position: absolute;

    top: -2.5px;

    left: 0;

    float: left;

    display: block;

    margin: 5px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background-color: #888;

    color: #fff;

    text-align: center;

    font-size: 16px;

    line-height: 42px;

    transition: .5s

}

.btn-slide4 span.circle4 {

    background-color: #afaae7

}

.btn-slide3 span.title3,.btn-slide3 span.title-hover3,.btn-slide4 span.title4,.btn-slide4 span.title-hover4 {

    position: absolute;

    left: 90px;

    margin: 0 auto;

    color: #888;

    text-align: center;

    font-weight: 700;

    font-size: 16px;

    transition: .5s

}

.btn-slide4 span.title4,.btn-slide4 span.title-hover4 {

    left: 80px;

    color: #afaae7

}

.btn-slide3 span.title-hover3,.btn-slide4 span.title-hover4 {

    left: 80px;

    opacity: 0

}

.btn-slide3 span.title-hover3,.btn-slide4 span.title-hover4 {

    color: #fff

}

#btn-nav {

    margin: 0;

    padding: 0;

/* 横向

display: flex;

*/

}

#btn-nav li {

    display: block;

    width: 100%;

}

#btn-nav li a {

    display: block;

    margin: 0 0 16px 0;

    padding: 24px 0 24px 108px;

    text-decoration: none;

    background-color: transparent;

    background-repeat: no-repeat;

    background-position: 18px 50%;

    background-size: 72px;

    color: #000;

    transition: all cubic-bezier(.89,.01,1,1) .2s

}

#btn-nav li a:hover {

    background-color: #0000001a;

    olor: #000;

    -webkit-transform: scale(0.98);

    -moz-transform: scale(2.98);

    -o-transform: scale(2.98);

    -ms-transform: scale(2.98);

    transform: scale(1.13)

}

#btn-nav li a h2 {

    margin: 0 0 6px 0;

    font-size: 23px;

    color: #000

}

#btn-nav li a h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 400;

    color: #000

}

/*

#btn-nav li a:hover h2,#nav li a:hover h3 {

color: #fff;

}

*/

#btn-nav .disc {

    background-image: url(https://i.loli.net/2020/05/23/eAVHKCJBmpxdbk3.png)

}

#btn-nav .save {

    background-image: url(https://i.loli.net/2020/05/23/ZT5I4hE7Q1dNm8b.png)

}

#btn-nav .like {

    background-image: url(https://i.loli.net/2020/05/23/7I2YptaXBdQowOL.png)

}

#btn-nav .pro {

    background-image: url(https://i.loli.net/2020/05/23/dUP8SiBwVvCufyE.png)

}

HTML

<a href="#" class="btn-slide">  

<span class="circle"><i class="fa fa-send"></i></span>  

<span class="title">样式一</span>  

<span class="title-hover">喵~ >▽<</span> </a>  


<a href="#" class="btn-slide2">  

<span class="circle2"><i class="fa fa-info-circle"></i></span>  

<span class="title2">样式二</span>   

<span class="title-hover2">喵~ >▽<</span> </a>   


<a href="#" class="btn-slide3">  

<span class="circle3"><i class="fa fa-info-circle"></i></span>  

<span class="title3">样式三</span>   

<span class="title-hover3">喵~ >▽<</span> </a>   


<a href="#" class="btn-slide4">  

<span class="circle4"><i class="fa fa-info-circle"></i></span>  

<span class="title4">样式四</span>   

<span class="title-hover4">喵~ >▽<</span> </a>