@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>??
