CSS

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

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *