Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Modifikasi Efek Hover Pada Button Dengan CSS3

Modifikasi Efek Hover Pada Button Dengan CSS3Modifikasi Efek Hover Pada Button Dengan CSS3 – setelah beberapa waktu lalu berturut-turut membahas tentang efek jQuery sekarang beralih ke CSS untuk memodifikasi button dengan bermacam efek hover. Apabila mengeposkan artikel dan ingin membuat button saat hover dengan berbagai efek agar lebih mudah dengan menambahkan attribut class dan rel dari efek yang akan di gunakan. Beberapa efek yang dapat digunakan adalah 25 efek menggunakan CSS transform, 6 efek border transitions, 6 efek shadow dan glow transition serta 8 efek speech bubbles dan 4 efek curls. Untuk dapat menerapkan seluruh efek tersebut agar dapat digunakan didalam blog langkah pertama pasang kode berikut ini kedalam template blog dan taruh di atas kode </head>.
<link rel='stylesheet' href='https://mas-andes.googlecode.com/svn/trunk/hover-min.css' media='all'/>
Kemudian simpan template. Untuk menentukan masing-masing efek yang akan di gunakan, kode pemanggilannya seperti dibawah ini:

2D Transforms

<a rel='grow' class='button grow'>Grow</a>
<a rel='shrink' class='button shrink'>Shrink</a>
<a rel='pulse' class='button pulse'>Pulse</a>
<a rel='pulse-grow' class='button pulse-grow'>Pulse Grow</a>
<a rel='pulse-shrink' class='button pulse-shrink'>Pulse Shrink</a>
<a rel='push' class='button push'>Push</a>
<a rel='pop' class='button pop'>Pop</a>
<a rel='rotate' class='button rotate'>Rotate</a>
<a rel='grow-rotate' class='button grow-rotate'>Grow Rotate</a>
<a rel='float' class='button float'>Float</a>
<a rel='sink' class='button sink'>Sink</a>
<a rel='hover' class='button hover'>Hover</a>
<a rel='hang' class='button hang'>Hang</a>
<a rel='skew' class='button skew'>Skew</a>
<a rel='skew-forward' class='button skew-forward'>Skew Forward</a>
<a rel='skew-backward' class='button skew-backward'>Skew Backward</a>
<a rel='wobble-horizontal' class='button wobble-horizontal'>Wobble Horizontal</a>
<a rel='wobble-vertical' class='button wobble-vertical'>Wobble Vertical</a>
<a rel='wobble-to-bottom-right' class='button wobble-to-bottom-right'>Wobble To Bottom Right</a>
<a rel='wobble-to-top-right' class='button wobble-to-top-right'>Wobble To Top Right</a>
<a rel='wobble-top' class='button wobble-top'>Wobble Top</a>
<a rel='wobble-bottom' class='button wobble-bottom'>Wobble Bottom</a>
<a rel='wobble-skew' class='button wobble-skew'>Wobble Skew</a>
<a rel='buzz' class='button buzz'>Buzz</a>
<a rel='buzz-out' class='button buzz-out'>Buzz Out</a>

Border Transitions

<a rel='border-fade' class='button red border-fade'>Border Fade</a>
<a rel='hollow' class='button red hollow'>Hollow</a>
<a rel='trim' class='button red trim'>Trim</a>
<a rel='outline-outward' class='button red outline-outward'>Outline Outward</a>
<a rel='outline-inward' class='button red outline-inward'>Outline Inward</a>
<a rel='round-corners' class='button red round-corners'>Round Corners</a>

Shadow and Glow Transitions

<a rel='glow' class='button turqoise glow'>Glow</a>
<a rel='box-shadow-outset' class='button turqoise box-shadow-outset'>Box Shadow Outset</a>
<a rel='box-shadow-inset' class='button turqoise box-shadow-inset'>Box Shadow Inset</a>
<a rel='float-shadow' class='button turqoise float-shadow'>Float Shadow</a>
<a rel='hover-shadow' class='button turqoise hover-shadow'>Hover Shadow</a>
<a rel='shadow-radial' class='button turqoise shadow-radial'>Shadow Radial</a>

Speech Bubbles

<a rel='bubble-top' class='button orange bubble-top'>Bubble Top</a>
<a rel='bubble-right' class='button orange bubble-right'>Bubble Right</a>
<a rel='bubble-bottom' class='button orange bubble-bottom'>Bubble Bottom</a>
<a rel='bubble-left' class='button orange bubble-left'>Bubble Left</a>
<a rel='bubble-float-top' class='button orange bubble-float-top'>Bubble Float Top</a>
<a rel='bubble-float-right' class='button orange bubble-float-right'>Bubble Float Right</a>
<a rel='bubble-float-bottom' class='button orange bubble-float-bottom'>Bubble Float Bottom</a>
<a rel='bubble-float-left' class='button orange bubble-float-left'>Bubble Float Left</a>

Curls

<a rel='curl-top-left' class='button purple curl-top-left'>Curl Top Left</a>
<a rel='curl-top-right' class='button purple curl-top-right'>Curl Top Right</a>
<a rel='curl-bottom-right' class='button purple curl-bottom-right'>Curl Bottom Right</a>
<a rel='curl-bottom-left' class='button purple curl-bottom-left'>Curl Bottom Left</a>
Demikian untuk cara Modifikasi Efek Hover Pada Button Dengan CSS3 agar setiap button dapat memiliki efek hover yang berbeda-beda.

Berlangganan artikel via email

39 Response to "Modifikasi Efek Hover Pada Button Dengan CSS3"

Salam Mas Andes wah Menarik nih Mas Andes artikelnya
Tentang Effects hover button, ini bisa di terapkan pada
Menu Navigasi biasa juga pada Menu drop down gak Mas
Contoh penerapan scriptnya gimana Mas? mohon pencerahanya
Terima kasih sudah berbagi tutorial yang bermanfaat ini :) :-bd

Balas

Asyik dapat Pertamx di artikelnya Mas Andes ini
Terima kasih deh Mas atas ruang dan waktunya :-d

Balas

Dengan efek hover tampilan button menjadi lebih keren ya Mas :)

Balas

penuh kreaksi mas, modifnya keren abis deh :-bd

Balas

Keren-keren mas modifannya :-bd

Balas

wah mantab mas, bagus bagus, :-d

Balas

Siip lagi nih mas...saya lebih cenderung ke speech burble kayaknya lebih keren

Balas

wuiiihhhhh kerennn mass...
hal ini yg saya nanti-nantikan...
mantappp

Balas

modifnya top markotop mas andes...
mungkin kapan2 bisa saya praktekan...tapi kodenya banyak gitu yah

Balas

kalo itu sih laen cerita lagi kang hehehe :)

Balas

penuh gairah juga mbak :D

Balas

ah si om bisa aja :D

Balas

cocok buat konsep UI mas :-bd

Balas

button lovers ya mas :D

Balas

di pake satu aja kang, kalo semuanya malah seperti halaman demo jadi button semua :)

Balas

keren mas andes.. maknyus pokonya,hehe :D

Balas

sipp...sangar dan insa Allah bermanfaat :)

Balas

keren tutorialnya Kang :) saya coba dulu ahhh... :)

Balas

selalu dengan kode yang sangat menyeramkan bagi saya heuheuheu :D

Balas

Tak cermati dulu kodenya mas..ntar klu ada waktu di try

Balas

Itu yang keliatan banyak kode pemanggil css aja mas, kita bisa pilih salah satu aja untuk menggnakannya...CSS udah dibuat ekternal

Balas

keren abis pokoknya hasil modifnya

Balas

wahh .. mantaps nih
, yang ini yang harus di coba hehehe
keren deh :D

Balas

Ohh ini hanya untuk tombol button saja yah Mas
Kira ini bisa untuk semua terima kasih deh :)

Balas

Hadir lagi dan simak samapi lumat agar lebih paham
Tapi kodenya lumayan berisi yah Mas. tapi sepertinya ringan juga

Balas

ikut share gan yaahh
trims salam kenal http://www.alat-bantusex.net

Balas

yang blm tau cara penerapannya ini saya kasih caranya
<a rel='float-shadow' class='button turqoise float-shadow' href="http://link-anda.com">Ganti Nama</a>

Balas

copas ke postingan sobat dan ganti Linknya juga tulisan "Ganti Nama"

Balas

cakep mas, tapi nambah berat gak ya loadingnya

Balas

wah keren pak.. izin coba nih..template nya punga pak andes mantap..

Kaos Muslim Keluarga

Balas

mantap mas button demonya.. izin coba

Balas

pernah lihat kode ini di github, punya Anda ya?

Balas

keren mas dan yang paling saya suka efek curls

Balas

Makasih banget mas tutorialnya,
salam kenal dari http://www.astanesia.com

Balas
avatar
Anonymous

Gilee, mantep bener mas tutornya

Balas
avatar
Anonymous

gimanasih penerapannya link rel itu dan htmlnya

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Modifikasi Efek Hover Pada Button Dengan CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode