The Wayback Machine - https://web.archive.org/web/20111013023302/http://html5snippets.com/snippets/16-css3-transition-text-glow-on-mouse-over

You must login to edit.

Sign In
Vup

1

CSS3 transition text glow on mouse over

You must login to vote.

Login with Twitter

This is a glow effect on a link using css3 transitions NO javascript. Works better on safari or chrome. It uses text-shadow to create the glow effect.

text-shadow transition glow 
 <!DOCTYPE html>
<html>
<header>
<style>
.text-glow{
	font-size:4em;
	color: #FFFFFF;
	font-family:Arial;

}

.text-glow:hover,
.text-glow:focus
.text-glow:active{
	-webkit-stroke-width: 5.3px;
	-webkit-stroke-color: #FFFFFF;
	-webkit-fill-color: #FFFFFF;
	text-shadow: 1px 0px 20px yellow;
	-webkit-transition: width 0.3s; /*Safari & Chrome*/	
	transition: width 0.3s;
	-moz-transition: width 0.3s; /* Firefox 4 */
	-o-transition: width 0.3s; /* Opera */
	
}

.text-glow a{
	
	-webkit-transition: all 0.3s ease-in; /*Safari & Chrome*/	
	transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in; /* Firefox 4 */
	-o-transition: all 0.3s ease-in; /* Opera */
	
	text-decoration:none;
	color:white;
}

body{
	background-color: #000000;
}
</style>
</header>

<body>
	<div class="text-glow">
		<a href="#">
			This Text Glows In Mouse Over
		</a>
	</div>
</body>
</html>

blog comments powered by Disqus View All Snippets