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