Assalamualaikum :)
Ada seorang adik tanya arrien macam mana nak buat navi macam arrien sekarang,btw code nie bukan arrien punya.. arrien just edit sedikit dekat bahagian hover dye and anyway full credit to Hafiz coz basecode dye yang punya ^^"
Comment kalau nak guna yea :)
| LIVE PREVIEW |
Template Design.
Paste code dalam Html/Javascript
Template Classic / Blogskin
Paste code di bawah code </style>
<style>NOTE :
.navi{
background:#eee;
display:inline-block;
width:90px;
font:10px trebuchet ms;
margin:5px;
border:1px solid #e6e6e6;
text-align:center;
color:#858585;
text-decoration:none;
text-transform:uppercase;
letter-spacing:1px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.navi:hover{
border-radius:0px;
box-shadow: inset 60px 8px 0px 0px #000, inset -60px -8px 0px 0px #000;
color:#fff;
}
</style>
<br />
<center>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
<a class="navi" href="LINK HERE">TITLE</a>
</center>
Merah : Link Page
Biru : Title.
Orange : Code color
