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.


Tombol Hover Image




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:




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:


<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 Indriyani
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 >>
= TERIMA KASIH =

47 komentar

  1. oya mbak mohon maaf jika pertanyaan ni sedikit kurang mengenakkan ya!

    Kalau 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

    BalasHapus
    Balasan
    1. 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,,

      gak 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.

      Hapus
    2. 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

      Hapus
    3. sama 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,

      Hapus
    4. eh ,,,, es doger sy kok di sebut2 sih ... devy pengen yah ,.,, :)

      Hapus
    5. Oh begitu ceritanya pantesan mbak devy jago banget sama soal kode-kodean :))

      Hapus
    6. Tapi kenyataanya tetap Mbak Devy lebih segalanya tibatan/daripada saya ya Mbak

      Hapus
    7. oooo, 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

      Hapus
    8. Jurusan itu hanya formalitas aja iya mas tapi kalau sudah terjun ke dunia keja pasti berbeda banget sama apa yang kita sekolah dulu [-(

      Hapus
    9. benar sekali mbak wid, praktek dilapangan lah yang membuktikan kemampuan dan keprofessionalan kita :D

      Hapus
    10. kalau 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.

      Hapus
    11. Mungkin 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 :)

      Hapus
  2. sy suka dengan yg page style effect .... :)

    BalasHapus
    Balasan
    1. silahkan diambil mas, tetapi minjem loh, Devy kasih waktu 2 hari ya, setelah itu pulangin lagi kerumah Devy. janji loh.!!

      Hapus
    2. hehehe,,, iya ntr sy balikin dan antar langsung ke rumahnya devy ,,,,, :)

      Hapus
    3. nda usah ke rumah devy Mas Ganteng..titip ke sy sj..!,.

      Hapus
    4. mas fiu : ntar kalau sudah dititipin sama mas aldino bilang saya ya, ntar biar kang saud yang balikin :d

      Hapus
    5. Saya 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...?

      Hapus
    6. jadi 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

      Hapus
    7. gk mw sy titipkn ah, sy langsung antar sndri aja ke rumahnya devy ,,,, :)

      Hapus
    8. Ya 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

      Hapus
  3. inimah praktekinnya harus rada santey supaya sempurna ya mba neng devy

    BalasHapus
    Balasan
    1. betul..betul.. nag pake kipas buatnyee, seperti awak,.

      Hapus
  4. keren mbak Dev, kayak buka jendela, klo untuk ukuran kotaknya bisa dikecilin ga mbak??

    BalasHapus
    Balasan
    1. takut ya mas kalau kotaknya terlalu besar pencuri bisa masuk lewat jendela, hehe..
      tinggal 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.

      Hapus
    2. bukan begitu mbak Dev, takutnya saya ga bisa minggat dari jendela, ahaha
      anu mbak Dev, ini kodenya taruh dimana mbak?? di html atau di widget??
      mav mbak merepotkan

      Hapus
    3. tar ya mas burel nunggu mbak devy nya online, sabar dulu

      Hapus
    4. jadi ketahuan dech kalau mas Buret sering minggat lewat jendela, hehe..!!

      Untuk 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.

      Hapus
  5. Wahh keren banget mbakk. saya suka x-)

    BalasHapus
    Balasan
    1. saya juga suka mas sama adminnya.
      hehe...
      maksudnya arrikel adminnya :d

      Hapus
  6. Tombol Hover Dengan 4 Style Effect semuanya keren..
    tinggal pilih2 :)

    BalasHapus
    Balasan
    1. silahkan mas tinggal dipilih mana yang menarik, tetapi jangan pilih Devy ya, kan pilihannya cuma ada 4 style effect, hehe...!!

      Hapus
  7. Wah 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 :)

    BalasHapus
  8. wah 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

    BalasHapus
    Balasan
    1. bukan 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.

      karena Devy juga pusing jika disuruh memecahkan kode itu dan membacanya, hehe..!!

      Hapus
    2. ternyata bukan cuman saya yang suka pusing dengan artikelnya mbak Devy :d
      hehe....

      Hapus
  9. 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 :)

    BalasHapus
  10. daftar 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 :)

    BalasHapus
    Balasan
    1. hmmm...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...

      Hapus
  11. Nice tutor mbak Devi. Keep give us your best tricks Hohohohoo

    BalasHapus
  12. Yaa.. salam keren banget nih mbak Devi :)

    BalasHapus
  13. asik lumayan buat template saya.. terima kasih mba devy anu cantik

    BalasHapus
  14. photoshop atau makromedia bisa ya mbak bikin seperti ini?

    BalasHapus
  15. mbak devy

    itu 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

    BalasHapus
    Balasan
    1. 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:

      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

      Hapus
  16. Wah pantesan jago koding, kuliahnya mendukung soalnya. :))

    BalasHapus
  17. cara menyimpannya bagaimana mba, masih gk faham,
    kode yang atas disatukan sama yg bawah gitu? qo hasilnya beda :D

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK