Home CSS Animation Animated Rotate Social Media Buttons CSS3 on Hover : HTML & CSS

Animated Rotate Social Media Buttons CSS3 on Hover : HTML & CSS

766
4

How To Create Animated Rotate Social Media Buttons CSS3 on Hover: HTML & CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Animated Social Media Buttons CSS3 on Hover</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Animated Social Media Buttons CSS3 on Hover</h1>
    <div class="icon-box">
        <div class="box">
        <img src="img/facebook.png" alt="">
        </div>
        <div class="box">
            <img src="img/twitter.png" alt="">
        </div>
        <div class="box">
            <img src="img/instagram.png" alt="">
        </div>
        <div class="box">
            <img src="img/youtube.png" alt="">
        </div>
    </div>  
</body>
</html>

CSS

/* #042f4b
#fbc99d
#ffffff */

body{
margin: 0;
padding: 0;
background:#fbc99d; 

}
h1{
    text-align: center;
    
}

.icon-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.icon-box .box {
 margin-right: 20px;
 width: 60px;
 height: 60px;
 background: #ffffff;
 border-radius: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: transform 1s;
 cursor: pointer;
 border: 1px dashed #042f4b;
 
}

.icon-box .box img{
    width: 30px;
}

.icon-box .box:hover{
    transform: rotate(360deg)
}

.icon-box img:hover{
    transition:  transform 1s, filter 2s ease-in-out;
    transform: scale(1.4)
}


(Visited 377 times, 2 visits today)

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here