* {
	margin:0;
	padding:0;
}
button {
	margin:30px 20px;
	padding:15px 20px;
	border-radius:10px;
	border:2px solid;
	font:16px 'Open Sans',sans-serif;
	text-transform:uppercase;
	background:none;
	outline:none;
	cursor:pointer;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.btn1 {
	color:#A3F7BF;
	border-color:#A3F7BF;
	background:-webkit-linear-gradient(left,#a3f7bf,#a3f7bf) no-repeat;
	background:linear-gradient(to right,#a3f7bf,#a3f7bf) no-repeat;
	background-size:0% 100%;
}
.btn1:hover {
	background-size:100% 100%;
	color:#27323A;
}
.btn2 {
	color:#A3F7BF;
	border-color:#A3F7BF;
	background:-webkit-linear-gradient(left,#a3f7bf,#a3f7bf) no-repeat;
	background:linear-gradient(to right,#a3f7bf,#a3f7bf) no-repeat;
	background-size:100% 0%;
}
.btn2:hover {
	background-size:100% 100%;
	color:#27323A;
}
.btn3 {
	color:#FFD460;
	border-color:#FFD460;
	position:relative;
	overflow:hidden;
}
.btn3:before {
	content:"";
	position:absolute;
	top:0;
	right:-5px;
	width:0;
	height:100%;
	background-color:#FFD460;
	z-index:-1;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.btn3:hover {
	color:#27323A;
}
.btn3:hover:before {
	width:110%;
}
.btn4 {
	color:#FFD460;
	border-color:#FFD460;
	position:relative;
	overflow:hidden;
}
.btn4:before {
	content:"";
	position:absolute;
	top:0;
	left:-5px;
	width:0;
	height:100%;
	background-color:#FFD460;
	z-index:-1;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.btn4:after {
	content:"";
	position:absolute;
	top:0;
	right:-5px;
	width:0;
	height:100%;
	background-color:#FFD460;
	z-index:-1;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.btn4:hover {
	color:blue;
}
.btn4:hover:before {
	width:60%;
}
.btn4:hover:after {
	width:60%;
}
.btn5 {
	color:#FFD460;
	border-color:#FFD460;
	position:relative;
	overflow:hidden;
}
.btn5:after {
	content:"";
	position:absolute;
	top:50%;
	left:0%;
	transform:translateY(-50%);
	width:100%;
	height:0%;
	background-color:#FFD460;
	z-index:-1;
	-webkit-transition:all .5s;
	transition:all .5s;
}
.btn5:hover {
	color:#FF0000;
}
.btn5:hover:after {
	height:110%;
}
.btn6 {
	color:burlywood;
	border-color:orangered;
	position:relative;
	overflow:hidden;
}
.btn6:after {
	content:"";
	display:block;
	position:absolute;
	top:-38px;
	left:-35px;
	width:110%;
	height:125%;
	background:#0000FF;
	transform:rotate(-45deg) translateY(-70%);
	transition:all .5s;
	z-index:-1;
}
.btn6:before {
	content:"";
	display:block;
	position:absolute;
	top:15px;
	right:-30px;
	width:110%;
	height:125%;
	background:#0000FF;
	transform:rotate(-45deg) translateY(100%);
	transition:all .5s;
	z-index:-1;
}
.btn6:hover {
	color:#fff;
}
.btn6:hover:after {
	transform:rotate(-45deg) translateY(15%);
}
.btn6:hover:before {
	transform:rotate(-45deg) translateY(-7%);
}