Html
    Css
    Js

    
                        
.button {
	background-color:#75daf3;
	border:none;
	color:#ffffff;
	outline:none;
	padding:12px 40px 10px;
	position:relative;
	left:50px; 
	top:50px;
	margin: 10px;
} 
.button:before,.button:after {
	border:0 solid transparent;
	transition:all 0.25s;
	content:'';
	height:24px;
	position:absolute;
	width:0px;
}
.button:before {
	border-top:2px solid #c47135;
	left:0px;
	top:-5px;
}
.button:after {
	border-bottom:2px solid #c47135;
	bottom:-5px;
	right:0px;
}
.button:hover {
	background-color:#58b6d3;
}
.button:hover:before,.button:hover:after {
	height:100%;
	width:100%;
}

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

鼠标悬停标题动画

上下横线动画 应用伪元素选择器,课调节宽高

0