-->


Button Hover dengan Trik CSS3

Berkreasi dengan CSS3 lagi gimana neh zob? Setuju kagak dengan ide dari aku neh. Yah, mumpung moodnya lagi baek neh soal otak-atik CSS3. Ntar kalo nggak diposting kayak gini hari ini juga, ntar jadinya lupa dan malah nggak keposting lagi. Padahal aku otak-atik CSS3 Button Hover ini aja udah puyeng, khan jadi mubazir juga to kalo didiemin n nggak ditampilan di blog ini. Mudah-mudahan trik ini bisa ngebuat blog kalian lebih bagus dan lebih menarik lagi nantinya. Dan yang jelas, perlu diinget !! Trik CSS3 ini meski banyak coding didalamnya tapi nggak membuat loading blog lemot, berbeda dengan Javascript yang membuat loading blog menjadi lemot. Kecuali kalo Javascript itu dihosting di Googlecode. Untuk Googlecode sebagai hosting java terbesar dan ter-unlimited, akan aku bahas ntar, sekarang untuk trik ini dulu ya? Gimana udah siap? Siap-siap langsung tancap gas, kebut dan cekiprotttttt hehe :-D

Sekarang kita akan belajar bagaimana membuat button hover dengan CSS3, sedikit akan kujelaskan disini, tentu saja sesuai pemahamanku. Kalo ada yang kurang, tolong kepada semuanya untuk meralatnya dan atau menambahi trik yang akan aku kasih berikut ini. Yah yang namanya juga orang lagi belajar, pasti juga ada salahnya juga khan? hehe .. Button hover CSS3 itu adalah button yang kita buat dengan menggunakan teknik CSS3. Button tersebut ketika kita sorot mouse, maka background gambarnya akan berubah sesuai dengan CSS3 yang udah kita buat. Gimana neh, binggung nggak? langsung aja ke TKP gimana gan. Soale ntar kalo kelamaan lupa lagi neh aku. Dan ntar malah nggak bisa ngapa-ngapain kita.




Langsung aja kalian ke menu ::-->>
1. Edit HTML
blogger dan cari kode ]]></b:skin>

2. Langsung pasang salah satu kode ini di atas kode no1.

Misal ::-->>

a.devilcode {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#ffffff;
border:5px solid #ff0000;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
a.devilcode:hover {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#00bfff;
border:5px solid #ff0000;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:20px;
-webkit-border-radius-top-right:20px;
-webkit-border-radius-bottom-left:20px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
]]></b:skin>


Begitu juga dengan kode dibawah ini ::-->>

a.devilz {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#ffffff;
border:3px inset #ff0000;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-top-right:0px;
-webkit-border-radius-bottom-left:0px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
a.devilz:hover {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#00bfff;
border:3px inset #ff0000;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-radius-top-right:0px;
-webkit-border-radius-bottom-left:0px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
]]></b:skin>



a.devil {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#ffffff;
border:5px outset #ff0000;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-top-right:15px;
-webkit-border-radius-bottom-left:15px;
-webkit-border-radius-top-left:15px;
-webkit-border-radius-bottom-right:15px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
a.devil:hover {
padding: 5px 10px 5px 10px;
margin:5px 0px 5px 5px;
background:#00bfff;
border:5px outset #ff0000;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-topleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-radius-top-right:15px;
-webkit-border-radius-bottom-left:15px;
-webkit-border-radius-top-left:15px;
-webkit-border-radius-bottom-right:15px;
-moz-box-shadow: 10px 10px 5px #edf50c;
-webkit-box-shadow: 10px 10px 5px #edf50c;
box-shadow: 10px 10px 5px #edf50c;
}
]]></b:skin>


Lhah terus kalian masuk di halaman posting kalian dan taruh ::-->>
Seperti ini :
1.
<a href="URL kalian" class="devilcode">Tulisan kalian</a>
2.
<a href="URL kalian" class="devilz">Tulisan kalian</a>
3.
<a href="URL kalian" class="devil">Tulisan kalian</a>
Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Agan jadi Cuapers ke 2, CONGRATULATE !

Harrys lala hobby ngeTweet [agi ngeComment]

kk minta script tombol install link donk.....

kayak punya kk! :17

:34

agung wisudhatama hobby ngeTweet [agi ngeComment]

Ehm, coba ntar tak cari dulu ... soale aku juga agak pusing nyarinya .. soale codingnya dah numpuk .. tapi nggak janji lho ??

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified