Html
    Css
    Js

    
                        
.draw-outline {
	box-shadow:inset 0 0 0 2px #000;
	color:#000;
	-webkit-transition:color 0.25s 0.125s;
	transition:color 0.25s 0.125s;
	position:relative;
}
.draw-outline::before,.draw-outline::after {
	border:0 solid transparent;
	box-sizing:border-box;
	content:'';
	pointer-events:none;
	position:absolute;
	width:0;
	height:0;
}
.draw-outline::before {
	top:0;
	right:0;
}
.draw-outline::after {
	left:0;
	bottom:0;
}
.draw-outline::after {
	border-top-width:2px;
	border-left-width:2px;
}
.draw-outline::before {
	border-bottom-width:2px;
	border-right-width:2px;
}
.draw-outline:hover {
	color:#00a0e9;
}
.draw-outline:hover::before,.draw-outline:hover::after {
	border-color:#00a0e9;
	-webkit-transition:border-color 0s,height 0.25s,width 0.25s;
	transition:border-color 0s,height 0.25s,width 0.25s;
	width:100%;
	height:100%;
}
.draw-outline:hover::before {
	-webkit-transition-delay:0s,0s,0.25s;
	transition-delay:0s,0s,0.25s;
}
.draw-outline:hover::after {
	-webkit-transition-delay:0.5s,0.5s,0.75s;
	transition-delay:0.5s,0.5s,0.75s;
}
.btn {
	background:none;
	border:none;
	cursor:pointer;
	line-height:1.5;
	font:700 1.2rem 'Roboto Slab',sans-serif;
	padding:1em 2em;
	letter-spacing:0.05rem;
}
.btn:focus {
	outline:2px dotted #55d7dc;
}

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

css悬停效果

0