HTML

1
2
3
<div class="nav-container">
<a href="#">Facebook  <span><i class="fab fa-facebook-square"></i></span></a>	
</div>

CSS

	.fa-facebook-square {
font-size: 32px;

}

.nav-container {
position: absolute;
top: 30%;
transform: translateY(-50%);

}

.nav-container a {
display: block;
text-decoration: none;
background: #fff;
color: black;
text-transform: uppercase;
padding: 15px 50px 15px 10px;
margin: 5px 0;
width: 200px;
letter-spacing: 1.5px;
box-shadow: 2px 2px 15px 0px rgba)0,0,0,0.75);
position: relative;
margin-left: -200px;
}

.nav-container span {
float: right;
width: 60px;
height: 100%;
line-height: 60px;
text-align: center;
color: #fff;
background: #3498db;
position: absolute;
right: 0;
top: 0;
}

.nav-container a:hover {
margin-left: 0!important;
}

Video