Home Owner Affies Stuffs Themes


April 19, 2015

Navigation Hover #1






Halo readers selamat pagiii ^^ karena gak ada ide mau posting apa, yaudah sekarang aku mau posting untuk membuat navigation hover stylish. Penasaran? Cekidot!


Page Page Page Page

  • Copy this code
<style>
a.gelato{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border:2px solid #ccc;
font-family:trebuchet ms;
font-size:10px;
text-transform:uppercase;
text-align:center;
background-color:#FFCA7F;
color:#ffffff;
display:inline-block;
width:100px;
padding:3px;
margin:3px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.gelato:hover{
letter-spacing:10px;
background:#FFE7C5;
}
a.banana{
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border:2px solid #ccc;font-family:trebuchet ms;
font-size:10px;
text-transform:uppercase;
text-align:center;
background-color:#FFBBBB;
color:#ffffff;
display:inline-block;
width:100px;
padding:3px;
margin:3px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
}
a.banana:hover{
letter-spacing:10px;
background:#FFE4E4;
}

</style>
<center>
<a class="gelato" href="/" title="Your Title">Page</a>
<a class="banana" href="/" title="Your Title">Page</a>
<a class="gelato" href="/" title="Your Title">Page</a>
<a class="banana" href="/" title="Your Title">Page</a>
</center>
<br />

  • Edit kode-kode seperlunya
  • Paste dimanapun yang kalian inginkan
That's it! Selamat mencoba....... :D

Thanks For Reading..... Leave Your Comments ^_^



3 comments:

Just Comment Here! I'm not a Wolf...