Hello Designers , In Today blog you will learn how to create a cool icon hover effect using html and css only.

ICON Design View

Icon Design View

On Hover Facebook Icon

On Hover Twitter Icon

On Hover Instagram Icon

In this design we use translate property to move up .

Icons

We take all the icons from the FontAwesome.com .

Video Tutorial

Code Preview

HTML FILE

 
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cool Hover Effect || 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">

     <div class="icon">
         
        <a href="#">

            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <i class="fab fa-facebook-f"></i>
            
        </a>
        <p>Follow Us</p>

     </div>

     <div class="icon">
         
        <a href="#">

            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <i class="fab fa-twitter"></i>
           
        </a>
        <p>Follow Us</p>

     </div>

     <div class="icon">
         
        <a href="#">

            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <i class="fab fa-instagram"></i>
            
        </a>
        <p>Follow Us</p>

     </div>



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

CSS FILE

 
  
 *{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

body{

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.social-media{

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

.social-media i{

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
}


.social-media .icon:nth-child(1) i{

    color: #3b5998;

}

.social-media .icon:nth-child(2) i{

    color: #00acee;

}
.social-media .icon:nth-child(3) i{

    color: #f2003c;

}


.social-media p{

    color: black;
}

.social-media .icon{

    position: relative;
    height: 200px;
    width: 200px;
    box-shadow: 0 20px 20px 0px rgba(0,0,0,0.5);
    
}

.social-media .icon:nth-child(1){

  background-color: #3b5998;

}

.social-media .icon:nth-child(2){

    background-color: #00acee;

}
.social-media .icon:nth-child(3){

    background-color: #f2003c;

}

.social-media .icon p{

    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #E6E7E8;


}

.social-media .icon a{

position: absolute;
height: 100%;
width: 100%;
background-color: #E6E7E8;
transition: all 0.3s linear;
overflow: hidden;

}

.social-media .icon:nth-child(1):hover a{

    transform: translate(-20px,-20px) rotateY(360deg);
}

.social-media .icon:nth-child(2):hover a{

    transform: translateY(-20px);
}

.social-media .icon:nth-child(3):hover a{

    transform: translate(-20px,-20px);
}

.social-media .icon:hover a span:nth-child(1){

    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(to right,#aad7ef,#00acee);
    top: 0;
    animation:  animation1 2s linear infinite;
}

@keyframes animation1{

    0%{

        transform: translateX(-100%);
    }
    100%{

        transform: translateX(100%);
    }
}

.social-media .icon:hover a span:nth-child(2){

    position: absolute;
    height: 100%;
    width: 2px;
    background: linear-gradient(to bottom,#aad7ef,#00acee);
    right: 0;
    animation:  animation2 2s linear infinite;
    animation-delay: 1s;
}


@keyframes animation2{

    0%{

        transform: translateY(-100%);
    }
    100%{

        transform: translateY(100%);
    }
}




.social-media .icon:hover a span:nth-child(3){

    position: absolute;
    height: 2px;
    width: 100%;
    background: linear-gradient(to left,#aad7ef,#00acee);
    bottom: 0;
    animation:  animation3 2s linear infinite;
}

@keyframes animation3{

    0%{

        transform: translateX(100%);
    }
    100%{

        transform: translateX(-100%);
    }
}


.social-media .icon:hover a span:nth-child(4){

    position: absolute;
    height: 100%;
    width:2px;
    background: linear-gradient(to top,#aad7ef,#00acee);
    left: 0;
    animation:  animation4 2s linear infinite;
    animation-delay: 1s;
}

@keyframes animation4{

    0%{

        transform: translateY(100%);
    }
    100%{

        transform: translateY(-100%);
    }
}

Full Code - Click Here to download Full Code

You can follow us on for more coding related knowledge

Facebook

Instagram

Linked In

ICON Design View

Icon Design View

On Hover Facebook Icon

On Hover Twitter Icon

On Hover Instagram Icon

In this design we use translate property to move up .

Icons

We take all the icons from the FontAwesome.com .

Video Tutorial

Code Preview

Keep Visiting 😁

Post a Comment

Post a Comment

About Us

Contact Form

Awesome css Icon Design using html css

ICON Design View

Icon Design View

On Hover Facebook Icon

On Hover Twitter Icon

On Hover Instagram Icon

In this design we use translate property to move up .IconsWe take all the icons from the FontAwesome.com .

Video Tutorial

Code Preview

Keep Visiting 😁

You might like

Post a Comment

Post a Comment

Contact Form

In this design we use translate property to move up .

Icons

We take all the icons from the FontAwesome.com .