Navigation ( with HOVER ) 1
Posted on Wednesday, 17 April 2013 @ 23:42 with 0 comments

OPTION 1 OPTION 2 OPTION 3 OPTION 4

( Sentuh navi di atas untuk melihat hover )
Assalamualaikum.

<style>
a.Pola{
padding:5px;
text-decoration:none;
font-family:tahoma;
font-size:10px;
text-transform:uppercase;
color: #aaa;
text-align:center;
width:70px;
background: #efefef;
display:inline-block;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
-moz-box-shadow:inset 200px 0px 0px #efefef;
-webkit-box-shadow:inset 200px 0px 0px #fff;
box-shadow:inset 200px 0px 0px #efefef;
}
 a.Pola:hover{
color: #fff;
-webkit-transition: 2.0s;
-moz-transition: 2.0s;
padding-left : 5px;
-moz-box-shadow:inset -100px 0px -200px -0.5px #aaa;
-webkit-box-shadow:inset -100px 0px -200px -0.5px #fff;
box-shadow:inset -100px 0px 0px -0.5px #aaa;
}
</style>
<a class="Pola" href="LINK">OPTION 1</a>
<a class="Pola" href="LINK">OPTION 2</a>
<a class="Pola" href="LINK">OPTION 3</a>
<a class="Pola" href="LINK">OPTION 4</a>

  • Press CTRL+C for copy
  • Paste dekat HTML/GADGET untuk teplate designer. 
  • Blogskin's user boleh paste dekat mana-mana yang awak nak navi tu muncul.

Labels:




0Comments:
Post a Comment



Hello ppl
SSUP ppl. 17, hiatus = lazy.
make a new life yehet.



Archive



Shout


© 2015 - Basecode Qayyum.