Tuesday, December 22, 2015

Membuat Efek-Efek Hover CSS Keren di Blog

Membuat Efek-Efek Hover CSS Keren di Blog

Dalam posting kali ini saya akan membahas tentang beberapa efek-efek hover keren yang bisa di pasang di blog. Pada dasarnya efek hover ini kita hanya menggunakan kode CSS dimana hover merupakan satu diantara beberapa pseudo elements yang terdapat pada CSS. Dengan menggunakan elemen CSS tersebut anda dapat membuat kreasi efek hover terhadap tombol yang bisa anda pasang di halaman blog, baik itu tombol download, tombol menu, bahkan untuk sekadar gaya-gayaan. Efek hover pada tombol dengan menggunakan CSS pada dasarnya berfungsi pada saat kursor melewati objek yang didefinisikan pada kode CSSnya.

Pseudo elements hover pada dasarnya memungkinkan kita untuk menjalankan kode CSS baru untuk elemen yang sama ketika kursor melintas diatas objek tersebut, sehingga suatu efek yang dapat menjadi tanda bahwa bagian tersebut bisa diklik atau menunjukkan bahwa suatu objek merupakan tombol menjadi lebih jelas dan dapat segera diketahui oleh pengunjung situs tersebut saat melihat perubahan penampilan pada suatu objek ketika kursor melintas di atasnya.

Salah satu jenis kategori perintah dalam pengkodean CSS adalah "hover" yang merupakan perintah untuk melakukan tugas yang telah diberikan ketika kursor sedang fokus pada objek yang memiliki kode hover tersebut. Perintah hover juga merupakan salah satu jenis perintah yang paling sering digunakan dalam pengkodean CSS, selain karena penggunaannya relatif simpel juga karena dapat menghasilkan efek yang lebih baik dan sesuai dengan keinginan penulis kode tersebut. Penggunaan kode nya sederhana, cukup tambahkan element state hover pada kode CSS nya, misalnya.

.button:hover {
   ...
}

Baiklah mungkin pengantar diatas sudah cukup, langsung saja, pertama-tama silakan teman-teman lihat beberapa live demo dari efek-efek hover yang saya maksud.

Demo Tombol Hover CSS

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="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>

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

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

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

Curls
<a rel="curl-top-left" class="button curl-top-left">Curl Top Left</a>
<a rel="curl-top-right" class="button curl-top-right">Curl Top Right</a>
<a rel="curl-bottom-right" class="button curl-bottom-right">Curl Bottom Right</a>
<a rel="curl-bottom-left" class="button curl-bottom-left">Curl Bottom Left</a>

Memasang Kode CSS Tombol Hover

Untuk bisa menggunakannya terlebih dahulu anda harus memasang kode CSS yang mendefinisikan style terhadap objek yang akan dijadikan tombol. Disini kode CSS yang saya berikan dikompres pada suatu link di direktori hosting Github. Anda bisa mencobanya sendiri pada tulisan saya tentang Cara Terbaru Hosting Kode CSS/JavaScript ke GitHub. Silakan tambahkan kode berikut dibawah kode <head>. Kemudian penggunaannya bisa dilihat pada kode demo diatas.

<link href='//rawgit.com/maringngerrang/css/master/hover.css' media='all' rel='stylesheet'/>

Mungkin cukup sekian yang dapat saya sampaikan tentang tombol dengan efek hover CSS yang keren, silakan coba pasang pada blog sendiri dan semoga bisa bermanfaat. Jika ada yang ingin anda sampaikan silakan tulis melalui kotak komentar yang ada di bagian bawah halaman ini, sistem manajemen komentar blog ini menggunakan layanan Disqus, namun anda tetap dapat berkomentar tanpa harus memiliki akun Disqus, silakan buat komentar sebagai tamu (Guest comment). Atau anda juga dapat mengirimkan tanggapan anda melalui halaman contact blog ini. Terima kasih dan sampai jumpa.

Next

Related