Heute zeige ich euch wie man mit CSS und HTML So ein Slide-In Button erstellen kann.
HTML
<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
