Let's Glow Some Social Media Application Icons

Ticker

10/recent/ticker-posts

Let's Glow Some Social Media Application Icons

AK Creative 1/09/2021 05:48:00 PM

Interesting Glowing Effect By HTML & CSS Program 


HTML Source Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <title>Glowing Icons</title>

    <link rel="stylesheet" href="style.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>

<li><i class="fab fa-telegram"></i></li>

<li><i class="fab fa-pinterest"></i></li>

<li><i class="fab fa-whatsapp"></i></li>

      </ul>


  </body>

</html>


CSS Source Code


*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  display: flex;
  height: 100vh;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: url("https://wallpapercave.com/wp/wp37411.jpg");
}
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 50px;
  height: 80px;
  width: 80px;
  background: transparent;
  line-height: 80px;
  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: #3b5998;
}
ul li:nth-child(2):before{
  background: #00acee;
}
ul li:nth-child(3):before{
  background: #3f729b;
}
ul li:nth-child(4):before{
  background: #0e76a8;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:nth-child(6):before{
  background: #0088cc;
}
ul li:nth-child(7):before{
  background: #c8232c;
}
ul li:nth-child(8):before{
  background: #4FCE5D;
}
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 #3b5998;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #00acee;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #3f729b;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #0e76a8;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(6):hover:before{
  box-shadow: 0 0 15px #0088cc;
}
ul li:nth-child(7):hover:before{
  box-shadow: 0 0 15px #c8232c;
}
ul li:nth-child(8):hover:before{
  box-shadow: 0 0 15px #4FCE5D;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #3b5998;
  text-shadow: 0 0 15px #3b5998;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #00acee;
  text-shadow: 0 0 15px #00acee;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #3f729b;
  text-shadow: 0 0 15px #3f729b;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #0e76a8;
  text-shadow: 0 0 15px #0e76a8;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(6):hover{
  color: #0088cc;
  box-shadow: 0 0 15px #0088cc;
  text-shadow: 0 0 15px #0088cc;
}
ul li:nth-child(7):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #c8232c;
  text-shadow: 0 0 15px #c8232c;
}
ul li:nth-child(8):hover{
  color: #4FCE5D;
  box-shadow: 0 0 15px #4FCE5D;
  text-shadow: 0 0 15px #4FCE5D;
}
ul li:hover{
  color: #ffa502;
  box-shadow: 0 0 15px #d35400;
  text-shadow: 0 0 15px #d35400;
}


OUTPUT Screen



Post a Comment

42 Comments

  1. UnknownJanuary 9, 2021 at 6:05 PM

    Awesome

    ReplyDelete
  2. ArzuJanuary 9, 2021 at 6:07 PM

    Superb

    ReplyDelete
  3. akhJanuary 9, 2021 at 6:09 PM

    Perfect 👌

    ReplyDelete
  4. UnknownJanuary 9, 2021 at 6:10 PM

    Perfect 👌

    ReplyDelete
  5. UnknownJanuary 9, 2021 at 6:10 PM

    Perfect 👌

    ReplyDelete
  6. UnknownJanuary 9, 2021 at 6:11 PM

    Perfect 👌

    ReplyDelete
  7. UnknownJanuary 9, 2021 at 6:13 PM

    Perfect 👌

    ReplyDelete
  8. UnknownJanuary 9, 2021 at 6:15 PM

    Wonderful

    ReplyDelete
  9. UnknownJanuary 9, 2021 at 6:17 PM

    Perfect 👌

    ReplyDelete
  10. UnknownJanuary 9, 2021 at 6:19 PM

    Nicely done

    ReplyDelete
  11. Kanchan KirtimanJanuary 9, 2021 at 6:21 PM

    Perfect 👌

    ReplyDelete
  12. UnknownJanuary 9, 2021 at 6:23 PM

    Brilliant idea

    ReplyDelete
  13. UnknownJanuary 9, 2021 at 6:26 PM

    Excellent

    ReplyDelete
  14. UnknownJanuary 9, 2021 at 6:27 PM

    awesome

    ReplyDelete
  15. KritikaJanuary 9, 2021 at 6:28 PM

    Excellent

    ReplyDelete
  16. UnknownJanuary 9, 2021 at 6:30 PM

    Excellent

    ReplyDelete
  17. UnknownJanuary 9, 2021 at 6:32 PM

    Very Nice

    ReplyDelete
  18. UnknownJanuary 9, 2021 at 6:33 PM

    Excellent

    ReplyDelete
  19. KKJanuary 9, 2021 at 6:37 PM

    Excellent

    ReplyDelete
  20. UnknownJanuary 9, 2021 at 6:41 PM

    Fantastic

    ReplyDelete
  21. UnknownJanuary 9, 2021 at 6:42 PM

    Fantastic

    ReplyDelete
  22. UnknownJanuary 9, 2021 at 6:43 PM

    Fantastic

    ReplyDelete
  23. UnknownJanuary 9, 2021 at 6:44 PM

    Fantastic

    ReplyDelete
  24. snehaJanuary 9, 2021 at 6:45 PM

    Fantastic wow

    ReplyDelete
  25. son aJanuary 9, 2021 at 6:47 PM

    Fantastic

    ReplyDelete
  26. UnknownJanuary 9, 2021 at 6:48 PM

    Fantastic

    ReplyDelete
  27. UnknownJanuary 9, 2021 at 6:49 PM

    Fantastic

    ReplyDelete
  28. UnknownJanuary 9, 2021 at 6:50 PM

    Amazing

    ReplyDelete
  29. UnknownJanuary 9, 2021 at 6:52 PM

    Amazing

    ReplyDelete
  30. UnknownJanuary 9, 2021 at 7:21 PM

    Kally fantastic

    ReplyDelete
  31. Jaunpur GPJanuary 10, 2021 at 8:00 AM

    Wow Very interesting

    ReplyDelete
  32. WonderingJanuary 10, 2021 at 8:01 AM

    Very nice

    ReplyDelete
  33. Excellent workJanuary 10, 2021 at 8:03 AM

    Wonderful

    ReplyDelete
  34. AwesomeJanuary 10, 2021 at 8:06 AM

    Wonderful Work With HTML

    ReplyDelete
  35. WonderfulJanuary 10, 2021 at 8:08 AM

    Superb

    ReplyDelete
  36. Rock_ArviJanuary 10, 2021 at 8:10 AM

    Amazing

    ReplyDelete
  37. A A AJanuary 10, 2021 at 8:12 AM

    Wow Nice

    ReplyDelete
  38. ArviJanuary 10, 2021 at 8:14 AM

    Fantastic

    ReplyDelete
  39. UnknownJanuary 10, 2021 at 8:17 AM

    Wow Nice

    ReplyDelete
  40. MLLJanuary 10, 2021 at 8:25 AM

    Superb

    ReplyDelete
  41. SuperJanuary 10, 2021 at 8:32 AM

    Excellent

    ReplyDelete
  42. AnonymousJanuary 10, 2021 at 12:54 PM

    Great

    ReplyDelete