<a href="#"><span>HOVER ME</span></a>

a {
	overflow:hidden; /* comment this property */
	
	margin: 90px auto;
	height: 50px;
	width: 150px;
	display: block;
	text-align:center;
	background-color:#ea4a38;
	color:#fff;
	text-decoration:none;
	position:relative;
	font:14px/50px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	box-shadow:rgba(0,0,0,.15) 0 1px 2px;
	transition: all 1s;
	outline:none;
}
a:hover {
	box-shadow:rgba(0,0,0,.3) 0 8px 25px, rgba(0,0,0,.2)0 1px;
	text-shadow:#fff 0 0 12px;
}
a:active {
	box-shadow:rgba(0,0,0,.2) 0 8px 25px;
	transition: all 0s;
}
a span { 
	position:relative;
	z-index:9;
}
a:before, a:after {
	position:absolute;
	top:0;
	left:0;
	z-index:7;
	display:block;
	content:" ";
}
a:after {
	height:100%;
	width:2000px;
	transition: all .8s;
	background: linear-gradient(135deg,  #b78458 0%,#935f39 19%,#aa6740 37%,#ffcece 50%,#ea2803 66%,#ff6600 75%,#c72200 100%);
}
a:before {
	height:26px;
	width:100%;
	top:-50px;
	z-index:10;
	opacity:0;
	background-color:rgba(255,255,255,.15);
	transition: all .5s;
}
a:hover:before {
	top:0;
	opacity:1;
}
a:hover:after {
	left:-1750px;
}
a:active:before {
	height:100%;
	background-color:rgba(255,255,255,.8);
	box-shadow:inset rgba(255,255,255,.5)0 0 25px;
	transition: all 0s;
}