Transitional mouse hover effect in CSS

index.html

<div id="effect">
<p><a href="#"><span>Normal text effect</span></a></p>
</div>

style.css

a, a:visited {
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#effect {
	width:200px;
	height:96px;
}

#effect p {
	color:#fff;
	letter-spacing:-1px;
	text-align:center;
	font-size:12px;
	line-height:15px;
	margin:30px 0 0 0;
}

#effect p span {
	display:block;
	font-weight:700;
	font-size:17px;
	letter-spacing:0px;
}

#effect p a,
#effect p a:visited {
	background:#00adef;
	padding:10px 0;
	display:block;
	text-decoration:none;
	color:#fff;
}

#effect p a:hover {
	background:#ef004d;
}