@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>
网友评论