in 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

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email