Tombol Hover Dengan 4 Style Effect - Seperti sebelumnya yang sudah pernah Anda lihat dibeberapa artikel SAHABAT BLOGGER 77 yang membahas beberapa effect colection, salah satunya tentang cara Membuat Tombol 3 Dimensi Dengan CSS yang mana efek pada tombol akan bekerja dengan perintah KLIK. Tutorial kali ini masih seputar efek pada tombol link, namun disini saya akan berikan 4 style effect pada tombol dengan fungsi sentuhan (Hover), efek akan terlihat saat panah mouse Anda berada diatasnya sebelum link pada tombol di KLIK dengan 4 tampilan effect seperti ini:
1. Flip Style Effect
Flipping Style (efek membalik) tombol untuk menampilkan text-link yang berada dibelakang dengan sekali putaran, sedangkan untuk gaya membalik saya bentuk dari sisi bawah ke atas dengan rotateX(90deg).
2. Switch Style Effect
Beralih atau menggeser tombol dalam satu area untuk menampilkan text-link yang berada sejajar dengan background berbeda. Efek ini sering disebut juga dengan slide-effect atau rolling (menggulung).
3. Shutter Style Effect
Tombol buka tutup dengan style effect seperti Daun Jendela (NACO) dengan jarak buka 90 derajat untuk menampilkan text-link, sehingga box untuk menutup link tetap akan terlihat menggantung saat di hover, dan kembali tertutup saat panah mouse dilepas.
4. Page Style Effect
Membuka tombol dengan kecepatan 360deg untuk menampilkan halaman baru text-link. efek seperti ini sama halnya saat Anda membuka lembaran BUKU.
Baca juga - Jumlah Kata Yang Ideal Untuk Membuat Artikel
Sebagai pilihan, disini saya sudah menyusun bentuk tombol hover Anda dengan 4 style effect yang berbeda dengan memisahkan masing-masing tampilan efeknya pada kode CSS dibawah ini:
Hasilnya:
DEMO SHOW
Sebagai contoh misal Anda ingin membuat tombol hover dengan Flip Style Effect, maka pada kode CSS diatas, hapus kode untuk mengatur bentuk efek switch, shutter dan page. Selanjutnya panggil style effect pilihan Anda dengan HTML seperti ini:
1. Flip Style Effect
Flipping Style (efek membalik) tombol untuk menampilkan text-link yang berada dibelakang dengan sekali putaran, sedangkan untuk gaya membalik saya bentuk dari sisi bawah ke atas dengan rotateX(90deg).
2. Switch Style Effect
Beralih atau menggeser tombol dalam satu area untuk menampilkan text-link yang berada sejajar dengan background berbeda. Efek ini sering disebut juga dengan slide-effect atau rolling (menggulung).
3. Shutter Style Effect
Tombol buka tutup dengan style effect seperti Daun Jendela (NACO) dengan jarak buka 90 derajat untuk menampilkan text-link, sehingga box untuk menutup link tetap akan terlihat menggantung saat di hover, dan kembali tertutup saat panah mouse dilepas.
4. Page Style Effect
Membuka tombol dengan kecepatan 360deg untuk menampilkan halaman baru text-link. efek seperti ini sama halnya saat Anda membuka lembaran BUKU.
Baca juga - Jumlah Kata Yang Ideal Untuk Membuat Artikel
Sebagai pilihan, disini saya sudah menyusun bentuk tombol hover Anda dengan 4 style effect yang berbeda dengan memisahkan masing-masing tampilan efeknya pada kode CSS dibawah ini:
<style>
.effect {
position: relative;display: inline-block;
width: 170px;height: 90px;
line-height: 90px;cursor: pointer;
perspective: 300px;margin:0 20px 0 0;}
.effect > div, .effect a {
width: 170px;height: 90px;
position: absolute;margin:0 auto;
color: #30261c;background-color: #e4ecb9;
font-size: 35px;text-align: center;
text-shadow:1px 2px 3px red;}
.effect > a {
display: block;color:#fff;
background-color: #DC143C;
text-shadow:1px 2px 4px #111;}
//Flip Style Effect...
.flip > a {transform: rotateX(-90deg);}
.flip:hover > div {transform: rotateX(90deg);}
.flip:hover > a {transform: rotateX(0deg);}
.flip:hover > div, .flip > a {transition: 0.1s all linear 0;}
.flip:hover > a, .flip > div {transition: 0.1s all linear 0.1s;}
//Switch Style Effect...
.switch {overflow: hidden;}
.switch > div, .switch a {transition: 0.1s all linear;position: absolute;}
.switch > a {transform: translate(200px, 0);}
.switch:hover > div {transform: translate(-200px, 0);}
.switch:hover > a {transform: translate(0, 0);}
//Shutter Style Effect...
.shutter > div, .shutter a {transition: 0.1s all linear;position: absolute;}
.shutter > div {z-index: 10;transform-origin: 0% 0%;}
.shutter:hover > div {transform: rotateX(90deg);}
//Page Style Effect...
.page > div, .page a {transition: 0.2s all linear;position: absolute;z-index: 5;}
.page > div {z-index: 10;transform-origin: 0% 0%;}
.page:hover > div {transform: rotateX(360deg);z-index: 1;}
</style>Hasilnya:
Sebagai contoh misal Anda ingin membuat tombol hover dengan Flip Style Effect, maka pada kode CSS diatas, hapus kode untuk mengatur bentuk efek switch, shutter dan page. Selanjutnya panggil style effect pilihan Anda dengan HTML seperti ini:
<div class="effect flip">
<div>HOVER HERE</div>
<a href="#">CLICK LINK</a>
</div>
<div class="effect switch">
<div>HOVER HERE</div>
<a href="#">CLICK LINK</a>
</div>
<div class="effect shutter">
<div>HOVER HERE</div>
<a href="">CLICK LINK</a>
</div>
<div class="effect page">
<div>HOVER HERE</div>
<a href="#">CLICK LINK</a>
</div>TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Tombol Hover Dengan 4 Style Effect
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
oya mbak mohon maaf jika pertanyaan ni sedikit kurang mengenakkan ya!
BalasHapusKalau boleh tahu mbak belajar atau kuliah di mana ya? sebab saya berpikir kalau mbak ini begitu hebat bisa membuat setiap artikel di blog ini dengan sajian yang begitu luar biasa ilmunya, sebab setiap membaca artikel mbak, saya berusaha untuk mempelajarinya, tetapi tetap saja ada yang tidak saya mengerti walaupun mencoba untuk memahaminya :D
pertanyaannya enak kok mas, seenak es doger mas Fiu, tetapi jangan terlalu dibesar-besarkan mas, apalagi sampai memuji devy seperti itu, ntar devy bisa terbang melayang, dan sadar ternyata hanya mimpi, hehe,,
Hapusgak ada yang istimewa kok mas, devu kuliah disalah satu perguruan swasta bandung, kebetulan devy mengambil jurusan IT desainer, yang banyak belajar tentang script untuk membuat bentuk-bentuk efek animasi dengan kode itu, sebenarnya semua artikel dalam blog SAHABAT BLOGGER 77 sebagai tempat untuk memperaktekkan apa yang saya pelajari, jadi pelajaran besok dikampus sudah siap menghadapainya.
itu saja kok.
Keren ya Mbak Devy bisa koding dengan beraneka type dan jenis melalui study kalau saya SD aja gak tamat Mbak.. pengetahuan di blogging dan semua kode saya belajar secara otodidak belaka. Kasihan kan masa depan saya ya Mbak ttt3
Hapussama kok mas saud Devy juga baru belajar, terhitung blog ini saja sudah satu tahun lebih, tetapi artikel didalamnya masih 180-an,itu karena saya belum sehebat mas saud,
Hapuseh ,,,, es doger sy kok di sebut2 sih ... devy pengen yah ,.,, :)
HapusOh begitu ceritanya pantesan mbak devy jago banget sama soal kode-kodean :))
HapusTapi kenyataanya tetap Mbak Devy lebih segalanya tibatan/daripada saya ya Mbak
Hapusoooo, ternyata mbak memang sudah didesain sebagai sosok yang hebat dan kreatif karena jurusannya memang mengarah, tapi walaupun demikian saya yakin kreatifitas mbak diiringi dengan hobi, sebab ada teman saya yang jurusannya komputer, tapi pengetahuan komputernya tidak sampai 50%, hal itu karena keinginan orang tuanya, sedangkan keinginnay adalah hukum :D
HapusJurusan itu hanya formalitas aja iya mas tapi kalau sudah terjun ke dunia keja pasti berbeda banget sama apa yang kita sekolah dulu [-(
Hapusbenar sekali mbak wid, praktek dilapangan lah yang membuktikan kemampuan dan keprofessionalan kita :D
Hapuskalau gak ada bekal, pasti apa yang akan kita hadapai dilapangan tidak akan bisa kita kerjakan, sekolah hanya untuk membentuk mental, sedangkan untuk mengembangkan semua itu dalam meraih kesuksesan adalah bekal dari sekolah.
HapusMungkin akar tidak lupa dengan apa yang telah disampaikan di semua mata kuliah di implementasi atau berbagi dengan temen - temen semua lewat artikel d blog. Semakin mantap :)
Hapussy suka dengan yg page style effect .... :)
BalasHapussilahkan diambil mas, tetapi minjem loh, Devy kasih waktu 2 hari ya, setelah itu pulangin lagi kerumah Devy. janji loh.!!
Hapushehehe,,, iya ntr sy balikin dan antar langsung ke rumahnya devy ,,,,, :)
Hapusnda usah ke rumah devy Mas Ganteng..titip ke sy sj..!,.
Hapusmas fiu : ntar kalau sudah dititipin sama mas aldino bilang saya ya, ntar biar kang saud yang balikin :d
HapusSaya pengen lihat Mas Fiu nerapin trik nya Mbak Devy ini deh.. Penasaran... Mas Aldi Gimana Pacul saya Urusanya niih...? Mbak Devi gimana nih siapa yang mau Tanggung jawab paccul saya..? apa saya minta tanggung jawabnya sama Kang Jum aja ya...?
Hapusjadi sampai sekarang itu PACUL belum tahu keberadaannya dimana, hmmm... kalau menurut devy sih ihklasin saja mas, mudah-mudahan itu pacul bisa memberikan mnafaat buat mereka yang pinjem tetapi gal pulang-pulang, hehe
Hapusgk mw sy titipkn ah, sy langsung antar sndri aja ke rumahnya devy ,,,, :)
HapusYa udah deh karena Mbak Devy sudang bilang seperti itu saya turutin aja biar gantinya 4 Tombol hover di post nya Mbak Devy saya ambil semua ya tt4tt4tt4 :d
Hapusinimah praktekinnya harus rada santey supaya sempurna ya mba neng devy
BalasHapusbetul..betul.. nag pake kipas buatnyee, seperti awak,.
Hapuskeren mbak Dev, kayak buka jendela, klo untuk ukuran kotaknya bisa dikecilin ga mbak??
BalasHapustakut ya mas kalau kotaknya terlalu besar pencuri bisa masuk lewat jendela, hehe..
Hapustinggal diubah saja kodenya mas, lihat pada CSS ini:
.effect {
position: relative;display: inline-block;
width: 170px;height: 90px;
line-height: 90px;cursor: pointer;
perspective: 300px;margin:0 20px 0 0;}
.effect > div, .effect a {
width: 170px;height: 90px;
position: absolute;margin:0 auto;
color: #30261c;background-color: #e4ecb9;
font-size: 35px;text-align: center;
text-shadow:1px 2px 3px red;}
ubah nilai width dan height, lalu posisikan teks dengan center dengan nilai line-height sama besar dengan nilai height pada kotaknya.
bukan begitu mbak Dev, takutnya saya ga bisa minggat dari jendela, ahaha
Hapusanu mbak Dev, ini kodenya taruh dimana mbak?? di html atau di widget??
mav mbak merepotkan
tar ya mas burel nunggu mbak devy nya online, sabar dulu
Hapusjadi ketahuan dech kalau mas Buret sering minggat lewat jendela, hehe..!!
HapusUntuk membentuk Text-Link dengan element <a href...
jadi tombol seperti ini biasanya banyak digunakan buat blog yang menyertakan tombol link dalam postingannya, contohnya blog ini dengan tombol DEMO SHOW.
jadi baiknya tempatkan pada formulir content mode tulis HTML saat akan membuat postingan terbaru.
Wahh keren banget mbakk. saya suka x-)
BalasHapussaya juga suka mas sama adminnya.
Hapushehe...
maksudnya arrikel adminnya :d
Tombol Hover Dengan 4 Style Effect semuanya keren..
BalasHapustinggal pilih2 :)
silahkan mas tinggal dipilih mana yang menarik, tetapi jangan pilih Devy ya, kan pilihannya cuma ada 4 style effect, hehe...!!
HapusWah maaf saya ketinggalan jauh tutorialnya Mbak Devy. tentang tombol hover dengan 4 gaya yang unik menarik. saya langsung santap dan nikmati racikanya ya Mbak makasih :)
BalasHapuswah bisa di coba nih,,,tetapi kalu baca kode html segitu bnyknya jadi pusing, tetapi minimal bisa menambah ilmu khususnya dalam dunia blogger, terimakasih tutornya mbak
BalasHapusbukan untuk dibaca kok mas, karena itu bukan kode-kode sandi dalam teka-teki yang harus kita pecahkan, cukup Copy saja kode itu lalu letakkan ditempat yang mas PUR suka, ya..kalau ingin buat tombol hover seperti itu maksudnya.
Hapuskarena Devy juga pusing jika disuruh memecahkan kode itu dan membacanya, hehe..!!
ternyata bukan cuman saya yang suka pusing dengan artikelnya mbak Devy :d
Hapushehe....
Simak lagi artikel tombol hover nya Mbak jenis pilhanya ada 4 jadi bisa berekpresi dan gak bosan ya Mbak Devy. makasih atas tutorialnya salam sukses selalu :)
BalasHapusdaftar hadir kembali mbak devy saya disini sambil belajar lagi yang tak ada habis tiap hari saya agar bisa sedikit memahami tentang css dan html biar kaya mbak devy deh :)
BalasHapushmmm...kayaknya ada yang perlu dibenarkan tuh mas saud, maksudnya kayak Devy gimana, emang mas saud mau kayak devy, mas saud mau jadi cantik, terus rambutnya panjang, mau..??hehehe...
HapusNice tutor mbak Devi. Keep give us your best tricks Hohohohoo
BalasHapusYaa.. salam keren banget nih mbak Devi :)
BalasHapusasik lumayan buat template saya.. terima kasih mba devy anu cantik
BalasHapusphotoshop atau makromedia bisa ya mbak bikin seperti ini?
BalasHapusmbak devy
BalasHapusitu effect tombol dari menu yg paling atas blog ini
"My Diary Artikel Profile Arsip File Follow"
gmn caranya ya?
itu mirip flip ya?
aku coba ubah2,, malah jd aneh
trus aku boleh mnta contact mbak ga?
mau bljr bnyk ma mbak nih,,
kebetulan skrg jg lg da tugas project dari kampus
klao privacy,, tlg kirim d fb aku
olivia cindy kohar
d tnggu responnya ya
flip (membalik) efek dimana objek satu akan membalik dengan sekali putaran dengan postion left,right,down atau top untuk menampilkan objek dua dengan perintah hover,klik atau auto. contoh seperti ini:
Hapus► Flipping Effect Concept On Image
sedangkan kalau yang mbak tanyakan adalah menu navigasi dengan efek rotate, sama sekali tidak mirip mbak, karena objek satu masih terlihat tampil saat dihover.
Kalau untuk membuatnya mbak boleh pelajari kodenya disini:
Menu Navigasi Fixed Full Rotate
Wah pantesan jago koding, kuliahnya mendukung soalnya. :))
BalasHapuscara menyimpannya bagaimana mba, masih gk faham,
BalasHapuskode yang atas disatukan sama yg bawah gitu? qo hasilnya beda :D