Heute zeige ich euch wie man mit CSS und HTML So ein Slide-In Button erstellen kann.

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