一些值如left等，还是需要写成-22px,才有作用。
另外，设置了div里面按钮a的宽高后，里面的span为何也会继承这宽高啊？？
.line .button{
	display:block;
	width:180px;
	height:50px;
	line-height:50px;
	color:#2DCB70;
	font-family:Arial, Helvetica, sans-serif;
	text-decoration:none;
	border:2px solid rgba(255,255,255,0.8);
	padding-left:20px;
	box-sizing:border-box;
	position:relative;
	margin:5px auto;
	background:url(images/allow.png) no-repeat 130px center;
	transition:0.3s ease-out;
	}
.line .button:hover{
	background-position:140px center;
	border:2px solid rgba(255,255,255,1);
	}
.button .line{
	position:absolute;
	display:block;
	background:none;
	transition:0.3s ease-out;
	}
.button:hover .line{background:#FFF;}
.button .line-left{
	width:0px;
	height:2px;
	top:-2px;
	left:-110%}
.button:hover .line-left{
	width:100%;
	left:-22px;}

.button .line-top{
	width:2px;
	height:0px;
	top:-110%;
	right:-22px;}
.button:hover .line-top{
	height:100%;
	top:-2px;}

.button .line-right{
	width:0px;
	height:2px;
	bottom:-2px;
	right:-110%;}
.button:hover .line-right{
	width:100%;
	right:-22px;}

.button .line-bottom{
	width:2px;
	height:0px;
	bottom:-110%;
	left:-22px;}
.button:hover .line-bottom{
	height:100%;
	bottom:-2px;}