纯css hover实现效果,纯CSS鼠标hover实现背景扇动效果

纯CSS鼠标hover实现背景扇动效果

.la-btn {

padding:14px 20px;

background:#1abc9c;

color:#fff;

font-size:14px;

overflow:hidden;

transition:all .35s;

display:inline-block;

position:relative;

z-index:1;

}

.la-btn:hover {

color:#fff;

background:none;

}

.la-btn:before {

visibility:hidden;

content:"";

position:absolute;

left:50%;

top:0;

width:0;

height:100%;

background:#2a2b2c;

z-index:-1;

transform:skew(45deg,0);

transition:all .35s;

}

.la-btn:hover:before {

visibility:visible;

width:150%;

left:-25%;

}

.la-session-more {

text-align:center;

margin-top:30px;

}

.la-session-more a {

width:229px;

height:44px;

border:1px solid #dbdbdb;

padding:0;

background:none;

text-align:center;

color:#212121;

line-height:44px;

margin:0 15px;

text-decoration:none;

}

.la-session-more a:hover {

border-color:#2a2b2c;

background:none;

}

老 王