Dalam posting kali ini saya akan membahas perihal beberapa efek-efek hover keren yang sanggup di pasang di blog. Pada dasarnya imbas hover ini kita hanya memakai aba-aba CSS dimana hover merupakan satu diantara beberapa pseudo elements yang terdapat pada CSS. Dengan memakai elemen CSS tersebut kau sanggup menciptakan kreasi imbas hover terhadap tombol yang sanggup kau pasang di halaman blog, baik itu tombol d0wnl0ad, tombol menu, bahkan untuk sekadar gaya-gayaan. Efek hover pada tombol dengan memakai CSS intinya berfungsi pada dikala kursor melewati objek yang didefinisikan pada aba-aba CSSnya.
Pseudo elements hover intinya memungkinkan kita untuk menjalankan aba-aba CSS gres untuk elemen yang sama ketika kursor melintas diatas objek tersebut, sehingga suatu imbas yang sanggup menjadi tanda bahwa kepingan tersebut sanggup diklik atau mengatakan bahwa suatu objek merupakan tombol menjadi lebih terang dan sanggup segera diketahui oleh pengunjung situs tersebut dikala melihat perubahan penampilan pada suatu objek ketika kursor melintas di atasnya.
Salah satu jenis kategori perintah dalam pengkodean CSS ialah "hover" yang merupakan perintah untuk melaksanakan kiprah yang telah diberikan ketika kursor sedang fokus pada objek yang mempunyai aba-aba hover tersebut. Perintah hover juga merupakan salah satu jenis perintah yang paling sering dipakai dalam pengkodean CSS, selain sebab penggunaannya relatif mudah juga sebab sanggup menghasilkan imbas yang lebih baik dan sesuai dengan harapan penulis aba-aba tersebut. Penggunaan aba-aba nya sederhana, cukup tambahkan element state hover pada aba-aba CSS nya, misalnya.
.button:hover { ... }Mungkin pengantar di atas sudah cukup bagi kau untuk lebih memahami menyerupai apa itu imbas hover. Berikut ini kumpulan tombol-tombol CSS dengan imbas hover animasi yang keren yang sanggup kau pasang di blog kamu. Sebelum itu kau sanggup lihat demo di sini sebagai contohnya.
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 sanggup menggunakannya terlebih dahulu kau harus memasang aba-aba CSS yang mendefinisikan style terhadap objek yang akan dijadikan tombol. Disini aba-aba CSS yang saya berikan dikompres pada suatu link di direktori hosting Github. Kamu sanggup mencobanya sendiri pada goresan pena saya perihal Cara Terbaru Hosting Kode CSS/JavaScript ke GitHub. Silakan tambahkan aba-aba berikut dibawah aba-aba <head>. Kemudian penggunaannya sanggup dilihat pada aba-aba demo diatas.<link href='https://code.maringngerrang.com/hover.css' media='all' rel='stylesheet'/>
Mungkin cukup sekian yang sanggup saya sampaikan perihal tombol dengan imbas hover CSS yang keren, silakan coba pasang pada blog sendiri dan supaya sanggup bermanfaat. Jika ada yang ingin kau sampaikan silakan tulis melalui kotak komentar yang ada di kepingan bawah halaman ini, sistem administrasi komentar blog ini memakai layanan Disqus, namun kau tetap sanggup berkomentar tanpa harus mempunyai akun Disqus, silakan buat komentar sebagai tamu (Guest comment). Atau kau juga sanggup mengirimkan jawaban kau melalui halaman contact blog ini. Terima kasih dan hingga jumpa. Sumber http://www.maringngerrang.com/