Light glowing effect using pure css3 | Sanwebcorner

Light glowing effect using pure css3


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>

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form mysql News ticker on hover change text to image our team page password strength checker Photoshop PHP Popup image on click the link pure css Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube