Tutorial : Navigate Hover #2.

by - 11:21 PG


(7) Tumblr | via Tumblr
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 :)


Template Design.
Paste code dalam Html/Javascript

Template Classic / Blogskin
Paste code di bawah code </style>
<style>
.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>
NOTE :
Merah : Link Page
Biru : Title.
Orange : Code color

You May Also Like

11 Comments

Thankz sudi baca entry arrien..
Jom ringan2 kan tangan anda untuk comment ^_^
Terima Kasih :D

No hard word..
Plezz..berbudi bahasa budaya kita kan ?? ^_-