Hello Designer , In today's blog you will learn how to create a cool glow icon using html and css only

Design Preview

After Hover

Before Hover

Video Tutorial

We use text-shadow to drop background shadow on hover and change color after two second using @keyframes

Preview of Full Code

HTML FILE

 
  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Glow Icon Design || Coding Zone</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

</head>
<body>

  <div class="social-media">

    <i class="fab fa-youtube"></i>
    <i class="fab fa-facebook-f"></i>
    <i class="fab fa-instagram"></i>

  </div>
  
</body>
</html>

CSS FILE

 
  body{

    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;


}

.social-media{

    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

i{

    color:#E6E7E8;
    font-size: 30px;
    cursor: pointer;
}

i:nth-child(1):hover{

    animation: changecolor1 2s linear infinite;

}

@keyframes changecolor1{

  0%{
      
      text-shadow: 0 0 50px red,
                   0 0 50px red,
                   0 0 50px red,
                   0 0 50px red;
      color: red;
  }
  100%{


    text-shadow: 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3;
    color: #0984e3;

  }


}


i:nth-child(2):hover{

    animation: changecolor2 2s linear infinite;

}

@keyframes changecolor2{

  0%{
      
      text-shadow: 0 0 50px #3b5998,
                   0 0 50px #3b5998,
                   0 0 50px #3b5998,
                   0 0 50px #3b5998;
      color: #3b5998;
  }
  100%{


    text-shadow: 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3;
    color: #0984e3;

  }


}


i:nth-child(3):hover{

    animation: changecolor3 2s linear infinite;

}

@keyframes changecolor3{

  0%{
      
      text-shadow: 0 0 50px #FD1D1D,
                   0 0 50px #FD1D1D,
                   0 0 50px #FD1D1D,
                   0 0 50px #FD1D1D;
      color: #FD1D1D;
  }
  100%{


    text-shadow: 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3,
                 0 0 50px #0984e3;
    color: #0984e3;

  }


}

Download Full Code : click here to download full code

You can follow us on for more coding related knowledge

Facebook

Instagram

Linked In

Design Preview

After Hover

Before Hover

Video Tutorial

Preview of Full Code

Keep Visiting 😁

Post a Comment

Post a Comment

About Us

Contact Form

Glow Icons Hover effect using html and css only

Design Preview

After Hover

Before Hover

Video Tutorial

Preview of Full Code

Keep Visiting 😁

You might like

Post a Comment

Post a Comment

Contact Form