All the website contains the social pages links through the social icons. We need to display the social links to increase our website traffic and to see our latest updates in social pages like Facebook, twitter, Instagram, google plus etc..., So we need to highlight the social icons in our website. There are different types of effects in css to animate the social icons on hover. This light glowing is one of the better effect to highlight the social icons.
Here is the example to highlight the social icons with light glowing effect using css3 code. Here i am using the font awesome icons to display icons. To display the icons i included the following CDN(content delivery network) link.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
The following css3 code will used to display the glowing effect for the font awesome icons. You can change the box-shadow color as your wish.
.wrapper ul li:hover.google {
border: 2px solid #dd4b39;
box-shadow: 0 0 15px #dd4b39;
transition: all 0.5s ease;
}
This example contains demo page. Please check the below demo page to see the glowing effect on social icons, And also this example contains the full code and download the code and use it for your web pages. I hope this example is very useful to your websites.
Code for Light Glowing Effect:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>light glowing effect on hover social icons</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body {
background: #212121;
padding:0px;
margin:0px;
}
.wrapper
{
background-color: #000000;
width: 100%;
height: 38px;
padding: 5px 10px 37px 10px;
}
.wrapper ul {
list-style: none;
}
.wrapper ul li {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 10px;
text-align: center;
cursor: pointer;
border-radius: 50%;
border: 2px solid #D8E2DC;
float: left;
transition: all 0.5s ease;
}
.wrapper ul li .fa {
color: #D8E2DC;
margin-top: 5px;
transition: all 0.5s ease;
font-size: 20px;
}
.wrapper ul li:hover.facebook {
border: 2px 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;
}
.wrapper ul li:hover.twitter {
border: 2px 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;
}
.wrapper ul li:hover.instagram {
border: 2px 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;
}
.wrapper ul li:hover.google {
border: 2px 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: 2px 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;
}
@media screen and (max-width: 640px){
.wrapper {
width: 350px;
}
.wrapper ul li{
margin-top: 10px;
}
.wrapper ul li.google{
margin-left: 60px;
}
}
@media screen and (max-width: 340px){
.wrapper {
width: 150px;
}
.wrapper ul li{
margin:15px;
}
.wrapper ul li.google{
margin-left: 15px;
}
}
</style>
</head>
<body translate="no" >
<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>
<center><h3><a style="color:#fff;" href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h3></center>
</div>
</body>
</html>
0 Comments