css——鼠标经过按钮时样式

效果网址：https://codepen.io/haidongqingyu/pen/MWjyXzB

1 . css3 transform:skew()

<a href="" class="dxd_skew">查看更多</a>

<style>

.dxd_skew {
    text-decoration: none;
    width: 100px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    margin: 15px;
    
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
}

.dxd_skew::after {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    transform: skew(45deg);
    background-color: #333;
    z-index: -1;
    transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
}

.dxd_skew:hover {
    color: #fff
}

.dxd_skew:hover::after {
    width: 200%;
}

</style>

 

2.利用背景渐变

(1)从左向右

<a href="" class="dxd_back1">查看更多</a>

<style>

.dxd_back1 {
text-decoration:none;
width: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;
width: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;
width: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;
width: 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 {
width: 110%;
}

</style>

(4)左下到右上

<a href="" class="dxd_back4">查看更多</a>

<style>

.dxd_back4 {
text-decoration:none;
width: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);
width: 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 {
width: 150%;
}

</style>

(5)  下到上

<a href="" class="dxd_back5">查看更多</a>

<style>

.dxd_back5 {
text-decoration:none;
width: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;
width: 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;
width: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%;
width: 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 {
width: 150%;
}

</style>

 

(7)左右 到中

<a href="" class="dxd_back7">查看更多</a>

<style>

.dxd_back7 {
text-decoration:none;
width: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%;
width: 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 {
width: 50%;
}

</style>

 

(8)左上 、 右下 到中

<a href="" class="dxd_back8">查看更多</a>

<style>

.dxd_back8 {
text-decoration:none;
width: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%;
width: 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 {
width: 80%;
}

</style>

(9)中 到两边

<a href="" class="dxd_back9">查看更多</a>

<style>

.dxd_back9 {
text-decoration:none;
width: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;
width: 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>