Membuat Tombol Efek Hover CSS Keren di Blogger

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 {
   ...
}

Itulah beberapa hal yang mungkin perlu kamu ketahui sebelum mengenal tentang bagaimana cara kerja animasi tombol di blog dengan menggunakan kode CSS. Jika kamu tertarik untuk membuatnya di blog kamu, silakan lihat live demo dari tombol tersebut untuk melihat secara langsung animasi yang dimaksud. Silakan buka di sini atau melalui link berikut ini.

Live Demo

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 Mendaftar dan Hosting File di GitHub. Selain itu kamu juga bisa mencoba memasang tombol animasi CSS lainnya. Ikuti langkah berikut untuk memasang tombol hover CSS di atas.

1. Buka Blogger
2. Buka menu Tema kemudian klik simbol titik tiga untuk membuka pilihan tambahan lalu pilih Edit HTML

3. Temukan kode </head> dan letakkan kode berikut di atasnya

<link href='https://code.maringngerrang.com/hover.css' media='all' rel='stylesheet'/>

4. Kemudian klik ikon Simpan yang ada di bagian bawah, kemudian klik tombol kembali dan lihat hasilnya saat kamu memasang kode tombol di atas.

Penutup

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.