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>