body {
background:rgb(238, 235, 235);
} .social-menu ul{
position:absolute;
top: 40%;
left: 40%
padding:0;
margin:0; transform:translate(-5%, -5%); display:flex;
} .social-menu ul li{ list-style:none; margin:0 15px;
.social-menu ul li .fa{
} line-height:40px;
font-size:30px;
transition:.6s;
-webkit-transition:.6s;
color: #000;
} .social-menu ul li fa:hover{ color:#fff;
.social-menu ul li a{
position:relative;
} display:block; height:40px; width:40px; border-radius: 40px; background-color:#fff; transition:.6s; -webkit-transition:.6s; box-shadow:0 5px 4px grey;
text-align:center;
}
.social-menu ul li a:hover{ transform:translate(0, -10px);
}
.social-menu ul li:nth-child(1) a:hover{
background-color:#3b5999;
social-menu ul li:nth-child(2) a:hover{
background-color: #55acee;
}
}
.social-menu ul li:nth-child (3) a:hover{ background-color:#e4405f;
}
.social-menu ul li:nth-child(4) a:hover{
background-color:yellow;
}
<div class="social-menu"> <ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-snapchat"></i></a></li>
</ul> </div>