CSS3按钮动画效果

本文由清尘发表于2014-12-13 22:41最后修改于2015-03-13属于HTML/CSS分类

点击查看演示
HTML部分:

<div class="ctn">
		<div class="box box1">
			<span class="ico"></span>
			<a href="" class="btn">mission
				<span class="line line_top"></span>
				<span class="line line_bottom"></span>
				<span class="line line_left"></span>
				<span class="line line_right"></span>
			</a>
		</div>
		<div class="box box2">
			<span class="ico"></span>
			<a href="" class="btn">play
				<span class="line line_top"></span>
				<span class="line line_bottom"></span>
				<span class="line line_left"></span>
				<span class="line line_right"></span>
			</a>
		</div>
		<div class="box box3">
			<span class="ico"></span>
			<a href="" class="btn">touch
				<span class="line line_top"></span>
				<span class="line line_bottom"></span>
				<span class="line line_left"></span>
				<span class="line line_right"></span>
			</a>
		</div>
	</div>

CSS部分:

body {
	background-color:#333;
}
.ctn {
	width:800px;
	margin:0 auto;
	margin-top:50px;
}
.box {
	width:205px;
	height:280px;
	float:left;
	display:inline;
	margin-right:60px;
}
.box .ico {
	display:block;
	width:205px;
	height:190px;
	background:url(mission.png) center top no-repeat;
	cursor:pointer;
	transition:transform 0.2s;
}
.box2 .ico {
	background:url(play.png) center top no-repeat;
}
.box3 .ico {
	background:url(touch.png) center top no-repeat;
}
.box .ico:hover {
	transform:rotate(360deg) scale(1.2);
}
.box .btn {
	color:#2DCB70;
	text-decoration:none;
	width:180px;
	height:50px;
	line-height:50px;
	display:block;
	text-align:left;
	border:2px solid rgba(255,255,255,0.8);
	background:url(allow.png) 140px center no-repeat;
	text-indent:20px;
	transition:all 0.3s;
	text-transform:uppercase;
	position:relative;
}
.box .btn .line {
	display:block;
	width:0px;
	height:2px;
	background:none;
	position:absolute;
	top:-2px;
	transition:0.4s ease;
}
.box .btn .line_top {
	left:-110%;
}
.box .btn .line_bottom {
	right:-110%;
	bottom:-2px;
	top:auto;
}
.box .btn .line_left {
	height:0px;
	width:2px;
	left:-2px;
	bottom:-110px;
	top:auto;
}
.box .btn .line_right {
	height:0px;
	width:2px;
	right:-2px;
	top:-110px;
}
.box .btn:hover {
	background-position:150px center;
	border:2px solid rgba(255,255,255,1);
}
.box .btn:hover .line {
	background-color:#fff;
}
.box .btn:hover .line_top {
	width:180px;
	left:-2px;
}
.box .btn:hover .line_bottom {
	width:180px;
	right:-2px;
}
.box .btn:hover .line_left {
	width:2px;
	height:100%;
	bottom:0px;
}
.box .btn:hover .line_right {
	width:2px;
	height:100%;
	top:0px;
}