daramylove,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>about</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">*{
padding:0;
margin:0;
}
body{
padding:0;
margin:0;
}
ul{
padding:0;
margin:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
ul li{
list-style-type:none;
}
ul li a{
position:relative;
text-decoration:none;
width:40px;
height:40px;
text-align:center;
line-height:40px;
display:block;
margin:10px;
border:1px solid #0000CD;
overflow:hidden;
transition:.2s;
}
ul li a .fa{
color:#0000CD;
}
ul li a::before{
content:'';
position:absolute;
width:100%;
height:100%;
background:#0067C2;
bottom:-100%;
left:0;
transition:.2s;
z-index:-1;
}
ul li a:hover::before{
bottom:0;
}
ul li a:hover .fa{
color:#FFFFFF;
}
</style>
</head>
<body>
<div class="wrap">
<div class="social">
<ul>
<li><a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href=""><i class="fa fa-vk" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</body>
</html>