M/s VIKASH TECH - We Write Imaginations to Codes..!!

Glowing Social Media Icons Widget using only HTML & CSS

Hello readers, Today in this blog you’ll learn how to create a Social Media Icons with CSS Glowing Effect.
The Social Media Widget is a simple widget that allows users to insert their social networks and connections profile URLs and other subscription options to show an icon to that social media site and more that open up in a separate browser window.
At first, these icons are in the initial stage where there is no glow effect. But when you hover on it, the specific hovered icon starts to glow. In the image, there is 2 Social Media Widget List with the same icons but which different glow colors. In the first widget, there are gold color glowing effects and in the second widget, there are default logo color glowing effects.

If you’re feeling difficulty to understanding what I’m saying then you can Try the code below to check the output yourself.Still facing issues? Feel free to mail us your queries on info@vikashtech.com

HTML

<!DOCTYPE html>
<!-- Created By praveen kumar -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Glowing Social Icons</title>
    <link rel="stylesheet" href="blog.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
  </head>
  <body>
      <ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</body>
</html>

CSS

*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: #262626;
}
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
ul li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
ul li:nth-child(1):before{
  background: #4267B2;
}
ul li:nth-child(2):before{
  background: #1DA1F2;
}
ul li:nth-child(3):before{
  background: #E1306C;
}
ul li:nth-child(4):before{
  background: #2867B2;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
/* ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
} */
Category :

Comments

No comments found.

….

FLAT 50% OFF

Latest Posts

Templates - In Flask

Templates are the structure of a website. Here in Python Flask. templates are treated as the views, which means these…

Static Files - Flask

When you work for web development, you will need to use some files for javascript or CSS, here in FLASK…

Variables in Flask

In Flask, a variable is created using tags inside route() function. To create a variable you just need to put…

Flask - Binding URL

First thing that comes to mind when we hear binding is - I guess - BOOKBINDING / PAPER BINDING. Well,…