Tombol Hover Dengan 4 Style Effect

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:

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