.btn {
	border: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	border-left:2px #40DDD2 solid;
}

.btn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.icon-home:before {
	content: "HOME";
}

.icon-about:before {
	content: "ABOUT US";
}

.icon-future:before {
	content: "FUTURE";
}
.icon-best:before {
	content: "BEST";
}

.icon-news:before {
	content: "NEWS";
}

.icon-contact:before {
	content: "CONTACT";
}

/* Button 5 */
.btn-5 {
	background: none;
	color: #fff;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	padding:0 0.9em ;
}

.btn-5:active {
	background: #061b1f;
	top: 5px;
}

.btn-5 span {
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.3s;
	-webkit-backface-visibility: hidden;
	-moz-transition: all 0.3s;
	-moz-backface-visibility: hidden;
	transition: all 0.3s;
	backface-visibility: hidden;
	line-height: 2;
	font-size: 1em;
	letter-spacing: 0.5em;
}

.btn-5:before {
	position: absolute;
	height: 100%;
	width: 100%;
	line-height: 1.5;
	font-size: 100%;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	letter-spacing: 0.1em;
}

.btn-5:active:before {
	color: #703b87;
}

/* Button 5a */
.btn-5a:hover span {
	-webkit-transform: translateY(300%);
	-moz-transform: translateY(300%);
	-ms-transform: translateY(300%);
	transform: translateY(300%);
}

.btn-5a:before {
	left: 0;
	top: -115%;
	color: #40DDD2;
}

.btn-5a:hover:before {
	top: 20%;
}