Tutorial : Navigate Hover { 1 }

Kawaii
Assalamualaikum and annyeonghaseyo. Dah lama sbnarnya yg request tutor ni. Cuma tieqa je baru nak buat. Navi ni asalnya dari layout lama yg tieqa pakai utk official blog dulu. Credit to owner. 

HOME ABOUT STUFF FOLLOW DBOARD

{ preview }

1. Copy code ni

<style>
a.navi {
border:1px solid #ebebeb;
text-transform:uppercase;
background:#fff;
text-decoration:none;
color: #666; padding: 6px;
font: 8px yow;
margin-left: 5px; margin-right: 5px;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #111,
inset 0px 0px 0px #111; display: inline-block;
width: 65px;
}

a.navi:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #111,
inset 0px -14px 0px #111; color: #fff;
}
@font-face { font-family:yow !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<center>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
<a class="navi" href="LINK">TITLE</a>
</center>

2. Paste dalam blog korang
3. Preview & save

Biru : warna background
Pink : link / url
Purple : title