Glowing Social icons hover effect

Rajesh DN

7 years ago

social icons

You might have seen many different kinds of social icon hover effects, But In this article, I’m going to show you, how to create the Glowing social icons hover effect. For achieving this effect I’m going to use the CSS3 box-shadow and text-shadow properties.

A small snippet about CSS3 Box-shadow and Text-shadow properties.

By using box-shadow property, we can create the shadow effect around the div elements.

box-shadow: (x-value)(y-value)(blur value)(spread value)(color);

By using text-shadow property, we can create the shadow effect around the text.

text-shadow: (x-value)(y-value)(blur value)(spread value)(color);

In this Demo, I’m going to use only blur value because by using only blur value we can create the shadow effect around the div and text.

For social icons, I’m going to use the font-awesome icons. and for accessing the font-awesome icons, we must include the CDN link in our head section.

Check out the youtube video on Glowing icon hover effect

HTML Structure

Consider a div element with class:wrapper and inside that div element, consider the unordered list with five list items with different classes inside it. and place the required social icons inside the list items. and for increasing the size of the font-awesome icons, use one of the default font-awesome class .fa-2x.

<div class="wrapper">
  <ul>	    
     <li class="facebook"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></li>
     <li class="twitter"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li>
     <li class="instagram"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li>
     <li class="google"><i class="fa fa-google fa-2x" aria-hidden="true"></i></li>
     <li class="whatsapp"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></li>
  </ul>
</div>

CSS Structure

Let’s style the wrapper div in such a way that, it should always be at the center of the browser. by setting its position value to absolute, top and left values to 50% and by using translate method of transform property, place the wrapper div exactly in the center of the browser.
```
.wrapper{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 550px;
        transform: translate(-50%,-50%);
}
```
Style the unordered list by setting its list-style value to none.
```
.wrapper ul{
    list-style: none;
}
```

Style the list items inside the UL list, by setting its width, height and line-height values to 75px and float them to left and set its border and border-radius values.

.wrapper ul li{
    width: 75px;
    height: 75px;
    line-height: 75px;
    margin: 0 10px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    border: 5px solid #444c47;
    float: left;
    transition: all 0.5s ease;
}

Style the icons by setting its color and margin-top value to 20px to align it properly.

.wrapper ul li .fa{
    color: #444c47;
    margin-top: 20px;
    transition: all 0.5s ease;
}

Now target the specific li classes for styling and by using box-shadow effect to border and text-shadow effect to icons we can achieve the glowing effect and use transition property for smooth transition effect.

facebook

.wrapper ul li:hover.facebook{
    border: 5px solid  #3b5998;
    box-shadow: 0 0 15px  #3b5998;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-facebook{
    color: #3b5998;
    text-shadow: 0 0 15px #3b5998;
    transition: all 0.5s ease;
}

twitter

.wrapper ul li:hover:twitter{
    border: 5px solid  #00aced;
    box-shadow: 0 0 15px  #00aced;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-twitter{
    color: #00aced;
    text-shadow: 0 0 15px #00aced;
    transition: all 0.5s ease;
}

instagram

.wrapper ul li:hover:instagram{
    border: 5px solid #bc2a8d;
    box-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-instagram{
    color:#bc2a8d;
    text-shadow: 0 0 15px #bc2a8d;
    transition: all 0.5s ease;
}

google

.wrapper ul li:hover:google{
    border: 5px solid  #dd4b39;
    box-shadow: 0 0 15px  #dd4b39;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-google{
    color: #dd4b39;
    text-shadow: 0 0 15px  #dd4b39;
    transition: all 0.5s ease;
}

.wrapper ul li:hover:whatsapp{
    border: 5px solid  #4dc247;
    box-shadow: 0 0 15px  #4dc247;
    transition: all 0.5s ease;
}

.wrapper ul li:hover .fa-whatsapp{
    color: #4dc247;
    text-shadow: 0 0 15px  #4dc247;
    transition: all 0.5s ease;
}

Wrapping up

By using both box-shadow and text-shadow properties, we can create the many different kinds of effects. and To know more about the box-shadow and text-shadow properties, visit the below links
CSS3-box-shadow-property
CSS3-text-shadow-property

check out the below demo.

See the Pen Glowing social icon hover effect by rajeshdn (@cool_lazyboy) on CodePen.0