Sticky Button
by Amin Kodaganur
HTML
<div class="sticky-container1 share_report">
<div class="" style="width:42px;float:left;">
<i class="fa fa-share fa-2x"></i>
</div>
<div class="" style="width:155px;font-weight:900;">
Share Report
</div>
</div>
<div class="sticky-container2 download_report">
<div class="" style="width:42px;float:left;">
<i class="fa fa-download fa-2x"></i>
</div>
<div class="" style="width:185px;font-weight:900;">
Download Report
</div>
</div>
CSS
.sticky-container1 {
position: fixed;
width: 42px;
height: 45px;
background-color: #8e44ad;
right : 0px;
top : 100px;
overflow:hidden;
color:#FFFFFF;
padding:8px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transition : 0.5s ease;
}
.sticky-container1:hover{
width: 155px;
cursor:pointer;
transition : 0.5s ease;
}
.sticky-container2 {
position: fixed;
width: 42px;
height: 45px;
background-color: #c0392b;
right : 0px;
top : 150px;
overflow:hidden;
color:#FFFFFF;
padding:8px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transition : 0.5s ease;
}
.sticky-container2:hover{
width: 185px;
cursor:pointer;
transition : 0.5s ease;
}