First, you start basic enough by defining your font:
Code:
.text-glow {
font-size:4em;
color: #FFFFFF;
font-family:Arial;
}
The second part becomes more complicated by defining the hover, focus and active attributes all at once
Code:
.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 */
}
CSS3 link attributes:
That’s the first half of the code. The second half defines the link attributes like this:
Code:
.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;
}
Again, this code mostly uses the transition effect, which is very popular with CSS3 designers.
To implement this effect on your page, simply set the div class and add an href tag around the text that you want to link and glow.
Code:
<div class="text-glow">
<a href="#">
This Text Glows In Mouse Over
</a>
</div>