Wednesday 23 January 2013

How To Create a Glow Text On Hover using css

First the HTML which is a basic html anchor tag with text inside it.


First we style the standard links
a{
font-size:16px;
color:#FFF;
-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;
}

Now we add the styling when we hover over the link.
a:hover{
-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 */
}

No comments:

Post a Comment