How to Create a CSS Glow Effect on Hover

css glow effect

The CSS Glow Effect on hover can be done by using the box-shadow styles. We also have to add transition property to the element.

 

Step number 1. Let’s create an anchor tag element

 <a href="#">glow</a> 

Step 2: Add background color and other styles

In our anchor tag, let’s add a background color and change default styles.

I’m going to remove the text-decoration. Add a padding of 15px into top and bottom and 25px for left and right side.

I also add values for fonts, just look into the code below:

a{
background-color: orange;
text-decoration:none;
padding: 15px 25px;
font-family: sans-serif;
font-size: 25px;
color: #fff;
border-radius:10px;
display: inline-block;
}

 

Read also:

 

Step 3: Add another selector for hover state

Create another anchor tag selector with :hover state. It should look like this:

a:hover{

}

Step 4. Add the box-shadow styles.

Here is where the magic happens.

Let’s add the box-shadow styles.

We can manually create it on CSS or we can also use the CSS box-shadow generator.

Box-shadow in CSS is the same with text-shadow value parameters. You can view a tutorial on CSS shadow in this video.

In this tutorial, I’m going to use the box-shadow generator.

 

Step 5. Set the Blur Radius.

css shadow generator

From there, you will have to set the Horizontal Length and Vertical Length into zero to ensure that the glow would be the same on both sides of the element.

It is important to have a higher blur radius. This would create the CSS glowing effect. I set this into 100.

Set the Shadow color. I will set the color the same background color with my element.

Leave the other options and copy the code you see on the right.

 

Step 6. Add the box-shadow styles

That’s it, add these styles to the :hover element.

a:hover{
-webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
-moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
}

 

If you try to hover over our element you will see that our shadow has been applied but we don’t like to make it appear real quick.

We will add a delay into the :hover state with our element so it’ll appear as if it was glowing.

I’m going to add transition: .8s ease.

Notice after you add and hover into the anchor tag, the element shows the box-shadow slowly thanks to our transition property.

 

But it disappears really quick when we unhover?

Simple…

Just add another transition property with value into the anchor tag.

The final CSS code should look like this:

a{
background-color: orange;
text-decoration:none;
padding: 15px 25px;
font-family: sans-serif;
font-size: 25px;
color: #fff;
border-radius:10px;
display: inline-block;
transition: .8s ease
}
a:hover{
-webkit-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
-moz-box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
box-shadow: 0px 0px 100px 0px rgba(255,165,0,1);
transition: .8s ease;
}

Hi, did you know that we have a youtube channel? It's called Garnatti one. Check it out!
I believe that education must be free to everyone. Feel free to share.

Leave a comment

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