Tutorial : Navigation With Hover

Assalamualaikum

Dah lama nak bagi , cuma takde kesempatan . now ade mase nah amek lah pade siapa nak guna . I coding this tutor with my own coding , if you wanna use this , comment it ! ^^

live preview :

TutorialAffiesFacebookTwitter

Paste the code where ever you want ;

<style>
@font-face {
font-family:tt;src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.navigate {
display:inline-block;
width:60px;
background:#eee;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:lowercase;
border-left:10px solid #aaa;
border-right:1px solid #aaa;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
-webkit-transition-duration:0.8s;
margin:5px;
}
.navigate:hover {
display:inline-block;
width:60px;
background:#fff;
text-align:center;
font-family:tt;
font-size:8px;
text-transform:uppercase;
border-left:1px solid #aaa;
border-right:10px solid #aaa;
border-top:1px solid #aaa;
border-bottom:1px solid #aaa;
-webkit-transition-duration:0.8s;
}
</style>
<a class="navigate" href="YOUR LINK">Title1</a><a class="navigate" href="YOUR LINK">Title2</a><a class="navigate" href="YOUR LINK">Title3</a><a class="navigate" href="YOUR LINK">Title4</a>

p/s : the bold code you can change it with your own creativity . tq :)