Cute Ball Menu Hover ( With Text Effect )



Assalamualaikum semua.
Dah lama Yura tak buat tuto.
Jadi hari ni rajin pulak nak buat.
Ok contoh tuto boleh tngok kat bawah ni dan sila hover sekali utk tengok effect dia.




Ok kalau awak berminat jom la buat sama2.


  • Dashboard > Layout > Add a Gadget > HTML/Javascipt
  • Copy semua code di bawah and pastekan ke dalam kotak HTML tu ye
<style>
#ballmenu a {DISPLAY:BLOCK;background: url(http://media.tumblr.com/tumblr_ma21ovGjJ61qcsxci.png);COLOR:#FFF;TEXT-DECORATION:NONE;TEXT-TRANSFORM:LOWERCASE;FONT-FAMILY:VERDANA;FONT-SIZE:9PX;WIDTH:50PX;HEIGHT:50PX;BORDER-RADIUS:200PX;TEXT-ALIGN:CENTER;LINE-HEIGHT:50PX;-WEBKIT-TRANSITION-DURATION:1.0S;}
#ballmenu a:hover{-WEBKIT-TRANSFORM: ROTATE(360DEG);TEXT-SHADOW:2PX 4PX 2PX #FFF;TEXT-SHADOW:2PX 5PX 0PX #F7904F, 2PX -5PX 0PX#F7904F,8PX 2PX 0PX #EEE,-8PX -2PX 0PX #F7904F;}
</style>
<div style="position: fixed; left: 20px; top: 100px;">
<center>
<div id="ballmenu">
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
<a href="Menu">LINK</a>
</div>
</center></div>

  • Lepas tu awak ubah la yg mana patut.
  • Warna purple : Gambar background
  • Warna hijau : Warna text
  • Warna Biru : Warna lepas hover
  • Warna Merah : Semakin banyak nilai, semakin ke bawah button
  • Warna Oren    : Semakin banyak nilai ,semakin ke kanan button.
  • Lepas tu awak save la. Harap2 jadi la ..>.<
Kalau ade yg nak effect text sahaja, boleh cuba tuto sini.
Kalau nak gmbr background, boleh ke sini.

5 comments

  1. thanks for sharing dera ..

    http://blurrr4evablurr.blogspot.com/2013/05/review-comelnye-essenseri.html

    ReplyDelete

Awak mehla komen? satu komen pun jadilah :')