Button Dengan Efek Hover

Selamat malam sobat Share Pengetahuan
setelah kemarin saya membahas tentang efek jQuery sekarang saya mau membahas tentang CSS untuk memodifikasi tombol dengan bermacam efek hover.gunanya apabila sobat mau mengeposkan artikel dan mau membuat tombol 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 sebagai berikut
1. 25 efek menggunakan CSS transform
2. 6 efek border transitions,
3. 6 efek shadow dan glow transition
4. 8 efek speech bubbles
5. 4 efek curls.
Untuk dapat menerapkan seluruh efek tersebut agar dapat digunakan didalam blog langkah pertama pasang kode berikut ini kedalam template blog sobat 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.

DEMO

Untuk menggunakan masing-masing efek yang mau di pake, kode penggunaanya adalah 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>

Ook deh sob,Demikian Postingan saya kali ini untuk cara Button Dengan Efek Hover. Semoga dapat berguna dan membantu sobat Blog semuanya. Trimakasih