How To Create A Pure CSS Glow Text On Hover

CSS has a good trick which allows you to change the style of an element when the visitors mouse moves over the element.

To change the style of an element on mouse over you need to use the pseudo :hover.

CSS Hover Event

Using :hover will then switch to use this style on mouse over. This is commonly used to display a underline on link text.

a{
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

This functionality has been around for along time, but since the introduction to CSS3 is allows web designers to come up with much more inventive ways of using hover events.

Steps To Make The Text Glow

In the below code I am going to walk you through the process of using :hover to create a faded glowing effect on your links.

The HTML For Links

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

<a href="#">Link Text</a>

The CSS For Links

First we style the standard links

a{
	font-size:16px;
	color:#FFF;
      transition: all 0.3s ease-in;
      text-decoration:none;
}

The CSS Hover Event

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;
}

Demo CSS Glow Text On Hover

Advertise here

Comment