Tutorial : Floating Navigation #3

Assalamualaikum & Salam Sejahtera

Dah kehabisan idea nak bagi tutorial apa lagi . Haritu ada cuba godek godek code floating navigation ,  akhirnya , berjaya buat satu floating navigation yang agak pelik sikit rupa nya. HAHA . Meh sini tengok macam mana rupanya ;

LIVE PREVIEW HERE

Haaa , itu macam navigation-nya . Pelik kan rupanya ? Tapi tak kisah lahh . Hehe , sebelum amek sila komen terlebih dahulu ya . Credit ? Terpulang . TQ

code ;

<style>
.alone a{
display:inline-block;
width:45px;
margin:5px;
text-align:center;
color:#fff;
font:9px corbel;
letter-spacing:0px;
text-transform:uppercase;
padding:55px 5px 0px 5px;
height:0px;
font-weight:bold;
overflow:hidden;
border-radius:1000px;
text-decoration:none;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.alone a:hover {
padding:20px 5px 10px 5px;
height:25px;
}
</style>
<center>
<div style="position:fixed; top:200px; left:30px;">
<div class="alone">
<a href="PASTE YOUR LINK HERE" style="background:#efa784; position:fixed; margin-left:-10px;">About</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#ef848c; position:fixed; margin-left:40px;">Tutorial</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#ef84c8; position:fixed; margin-left:-10px;">Affiliate</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#cd84ef; position:fixed; margin-left:40px;">Facebook</a><br><br>
<a href="PASTE YOUR LINK HERE" style="background:#a17de2; position:fixed; margin-left:-10px;">Twitter</a><br><br>
<a href="http://www.blogger.com/follow-blog.g?blogID=$blogID$" target="_blank" rel="nofollow" style="background:#8784ef; position:fixed; margin-left:40px;">+Follow</a>
</div>
</center>