Html
    Css
    Js
.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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

鼠标hover闪动填充效果

0