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

6 comment [s]:

HunHan said...

thanzs akak,,

atiqahjaidin said...

@// Alyaa Najlaa U're welcome :)

Aimi Wardina ♥ said...
This comment has been removed by the author.
Aimi Wardina ♥ said...

guna, thank you !

Unknown said...

thank you

Auni said...

assalamualaikum ! thanks for the tutorial ! thanks sangat-2