效果网址：https://codepen.io/haidongqingyu/pen/MWjyXzB
1 . css3 transform:skew()
<a href="" class="dxd_skew">查看更多</a>
<style>
.dxd_skew{
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
position:relative;
overflow:hidden;
transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
.dxd_skew::after{
content:'';
position:absolute;
0;
height:100%;
transform:skew(45deg);
background-color:#333;
z-index:-1;
transition:.5s;
-webkit-transition:.5s;
}
.dxd_skew:hover{
color:#fff
}
.dxd_skew:hover::after{
200%;
}
</style>
2.利用背景渐变
(1)从左向右
<a href="" class="dxd_back1">查看更多</a>
<style>
.dxd_back1 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #A3F7BF;
border-color: #A3F7BF;
background: -webkit-linear-gradient(left, #a3f7bf, #a3f7bf) no-repeat;
background: linear-gradient(to right, #a3f7bf, #a3f7bf) no-repeat;
background-size: 0% 100%;
transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
.dxd_back1:hover {
background-size: 100% 100%;
color: #27323A;
}
</style>
(2)从上向下
<a href="" class="dxd_back2">查看更多</a>
<style>
.dxd_back2 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #E4F68F;
border-color: #E4F68F;
background: -webkit-linear-gradient(left, #e4f68f, #e4f68f) no-repeat;
background: linear-gradient(to right, #e4f68f, #e4f68f) no-repeat;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
background-size: 100% 0%;
}
.dxd_back2:hover {
background-size: 100% 100%;
color: #27323A;
}
</style>
（3）右到左
<a href="" class="dxd_back3">查看更多</a>
<style>
.dxd_back3 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #FFD460;
border-color: #FFD460;
position: relative;
overflow: hidden;
}
.dxd_back3:before {
content: "";
position: absolute;
top: 0;
right: -5px;
0;
height: 100%;
background-color: #FFD460;
z-index: -1;
-webkit-transition: all .5s;
transition: all .5s;
}
.dxd_back3:hover {
color: #27323A;
}
.dxd_back3:hover:hover:before {
110%;
}
</style>
(4)左下到右上
<a href="" class="dxd_back4">查看更多</a>
<style>
.dxd_back4 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #FFD478;
border-color: #FFD478;
position: relative;
overflow: hidden;
}
.dxd_back4:before {
content: "";
background-color: #FFD478;
-webkit-transform: skew(45deg, 0);
transform: skew(45deg, 0);
0;
height: 100%;
position: absolute;
top: 0px;
left: -30px;
z-index: -1;
-webkit-transition: all .5s;
transition: all .5s;
}
.dxd_back4:hover {
color: #fff;
}
.dxd_back4:hover:before {
150%;
}
</style>
(5) 下到上
<a href="" class="dxd_back5">查看更多</a>
<style>
.dxd_back5 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #96EAB7;
border-color: #96EAB7;
position: relative;
overflow: hidden;
}
.dxd_back5:before {
content: "";
position: absolute;
bottom: 0;
left: -5px;
110%;
height: 0;
background-color: #96EAB7;
z-index: -1;
-webkit-transition: all .5s;
transition: all .5s;
}
.dxd_back5:hover {
color: #fff;
}
.dxd_back5:hover:before {
height: 100%;
}
</style>
(6)右上到左下
<a href="" class="dxd_back6">查看更多</a>
<style>
.dxd_back6 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #53CDD8;
border-color: #53CDD8;
position: relative;
overflow: hidden;
}
.dxd_back6:before {
content: "";
background-color: #53CDD8;
position: absolute;
z-index: -1;
top: 0;
right: -30px;
height: 100%;
0;
-webkit-transform: skew(45deg, 0);
transform: skew(45deg, 0);
-webkit-transition: all .5s;
transition: all .5s;
}
.dxd_back6:hover {
color: #fff;
}
.dxd_back6:hover:before {
150%;
}
</style>
(7)左右 到中
<a href="" class="dxd_back7">查看更多</a>
<style>
.dxd_back7 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #A6ACEC;
border-color: #A6ACEC;
overflow: hidden;
position: relative;
}
.dxd_back7:before,
.dxd_back7:after {
content: "";
height: 100%;
0;
position: absolute;
z-index: -1;
background-color: #A6ACEC;
top: 0;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.dxd_back7:before {
left: 0;
}
.dxd_back7:after {
right: 0;
}
.dxd_back7:hover {
color: #fff;
}
.dxd_back7:hover:before,
.dxd_back7:hover:after {
50%;
}
</style>
(8)左上 、 右下 到中
<a href="" class="dxd_back8">查看更多</a>
<style>
.dxd_back8 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #ACE7EF;
border-color: #ACE7EF;
overflow: hidden;
position: relative;
}
.dxd_back8:before,
.dxd_back8:after {
content: "";
position: absolute;
z-index: -1;
height: 100%;
0;
top: 0;
background-color: #ACE7EF;
-webkit-transition: all .4s;
transition: all .4s;
}
.dxd_back8:before {
left: -30px;
-webkit-transform: skew(-45deg, 0);
transform: skew(-45deg, 0);
}
.dxd_back8:after {
right: -30px;
-webkit-transform: skew(-45deg, 0);
transform: skew(-45deg, 0);
}
.dxd_back8:hover {
color: #fff;
}
.dxd_back8:hover:before,
.dxd_back8:hover:after {
80%;
}
</style>
(9)中 到两边
<a href="" class="dxd_back9">查看更多</a>
<style>
.dxd_back9 {
text-decoration:none;
100px;
height:35px;
display:flex;
justify-content:center;
align-items:center;
border:1px solid #ddd;
margin:15px ;
color: #CEFFF1;
border-color: #CEFFF1;
overflow: hidden;
position: relative;
}
.dxd_back9:before,
.dxd_back9:after {
content: "";
position: absolute;
z-index: -1;
background-color: #CEFFF1;
100%;
height: 0;
left: 0;
-webkit-transition: all .25s;
transition: all .25s;
}
.dxd_back9:before {
bottom: 50%;
}
.dxd_back9:after {
top: 50%;
}
.dxd_back9:hover {
color: #27323A;
}
.dxd_back9:hover:before,
.dxd_back9:hover:after {
height: 50%;
}
</style>