<style>

.zackk{

width:96px;

padding:2px;

margin-top:5px;

box-shadow:2px 2px 4px #DFDFDF;

background:#eee;
font:8px tt; 
text-align:center;
Text-decoration:none;
color:#B1B1B1;
text-transform:uppercase;
display:block;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
border-left:0px solid #B1B1B1;
}

.zackk:hover{
width:66px;
border-left:30px solid #B1B1B1;
}
@font-face {
font-family:tt !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:35px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="background:#eee;color:#fff; position:fixed; top:0px;left:90px;width:10px;height:100px; box-shadow:2px 2px 6px #ddd; text-align:center; font-size:12px; text-transform:uppercase;">
</div>
<div style="position:fixed; top:100px;left:20px;width:100px; color:#aaa;">
<div style="background:#B1B1B1;color:#fff;width:100px; box-shadow:2px 2px 4px #bbb;text-align:center; font-size:12px; text-transform:none;">
Navi</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZfFG2sdU2xCJ-MWgKfQOp_WRCAUrVxOL4xq1wRSe69cXsDud3HKMlgK3EyYYfq27YqPXBJ9j8oZiyV-ndlkPm8JPKMHIkWw9SMdLN6d9vRgrISY-Hl970e7e-u1VzVArivLPrwPJxmA/s1600/GDMVGyp.png" style="width:80px;border:10px solid #eee;margin-top:5px;box-shadow:2px 2px 4px #ddd;" >

<a class="zackk" href="LINK HERE">Twitter</a>
<a class="zackk" href="LINK HERE">Askfm</a>
<a class="zackk" href="LINK HERE">Follow</a>
<a class="zackk" href="LINK HERE">Dash</a>
</div>