Monday, April 22, 2013

Tutorial : Navigate Hover #10

Large

こんにちは, 안녕하세요 , Assalamualaikum. 

Hye . Atin nak bagi lagi navigate hover ni hihi.. kebetulan tengah rajin2 nak cari idea untuk buat hover ni LOL huhu. Ok2 korang boleh tengok contoh bawah ni.. and clcik preview untuk llihat hasihnya. jangan lupa cube hoverkan nanti jadi mcm mana ek?? hihi..



  • Template Design/simple : paste kat Html/Javascript
  • Blogskin/Classic : paste bawah code </style>



<style>
@font-face {
font-family:tt;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.nave{
background:url(http://www.pastelpatterns.com/small/smallpattern-3.png);
border-top: solid 4px #ffffff;
border-bottom: solid 4px #ffffff;
border-radius: 5px 5px 5px 5px;
display:inline-block;
text-decoration:none;
color:#eee;
font:8px tt;
height:15px;
text-transform:uppercase;
text-align:center;
margin: 0px 5px 9px;
padding-top:3px;
width:70px;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
}
.nave:hover{
border-top: solid 4px #F9B7FF;
border-bottom: solid 4px #C3FDB8;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
}
</style>
<center>
<a class="nave" href="LINK HERE">TITLE</a>
<a class="nave" href="LINK HERE">TITLE</a>
<a class="nave" href="LINK HERE">TITLE</a>
<a class="nave" href="LINK HERE">TITLE</a>
<a class="nave" href="LINK HERE">TITLE</a>
</center>

kuning : Background
biru : background color
merah : link
oren  : Title


No comments: