Modifikasi Efek Hover Pada Button Dengan CSS3

Modifikasi Efek Hover Pada Button Dengan CSS3 - Halo, sobat blogger semua. Pada kesempatan yang indah ini saya kembali akan berbagi sebuah tips blogger untuk sobat semua. Pada artikel kali ini saya akan membagikan tips bagaimana cara melakukan modifikasi efek hover pada button menggunakan CSS3. Mungkin sobat semua sudah sering ya menggunakan button/tombol sebagai media meletakan sebuah link, saya juga begitu.

Menurut saya, jika kita menggunakan button sebagai media meletakan link, tentu akan lebih menarik dimata pengunjung serta lebih enak untuk dilihat jika dibandingkan kita menggunakan text langsung untuk melatakan sebuah link. Dan sekarang ini, sudah banyak sekali modifikasi button menggunakan berbagai efek hover dan icon untuk mempercantik tampilan button tersebut. Dan salah satunya adalah Modifikasi Efek Hover Pada Button Dengan CSS3 yang akan saya bagikan pada kesempatan kali ini.

Baiklah, mungkin sobat semua sudah penasaran dengan tampilan seperti apa button hover efek kali ini. Untuk itu, agar sobat tidak bertanya-tanya lagi akan tampilan dari button hover efek ini, ada baiknya jika sobat melihat live demo pada link yang sudah saya siapkan dibawah ini.

live demo

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, dan agar dapat digunakan didalam blog langkah pertama pasang kode berikut ini kedalam template blog dan taruh di atas kode </head>.

<link href='https://googledrive.com/host/0B9oV8y69Frv8VnZ5cVdpVXZVN2s' rel='stylesheet' type='text/css'/>

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. Semoga artikel singkat ini bisa bermanfaat bagi sobat semua. Jika sobat mengalami masalah atau kesulitas ketika menerapkan tips kali ini, silahkan tinggalkan komentar dibawah ini. Pasti saya akan membantu!

Selamat mencoba..!