Tombol link dengan fungsi sentuhan

Tombol Hover Dengan 4 Style Effect

SANDALPLASTIK2020 »https://sandalplastik.blogspot.com
.effect {
position: relative;display: inline-block;
width: 150px;height: 60px;
line-height: 60px;cursor: pointer;
perspective: 300px;margin:0 20px 0 0;}

.effect > div, .effect a {
width: 150px;height: 60px;
position: absolute;margin:0 auto;
color: #30261c;background-color: #e4ecb9;
font-size: 20px;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(160px, 0);}
.switch:hover > div {transform: translate(-160px, 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;}

HOVER HERE

CLICK LINK

HOVER HERE

CLICK LINK

HOVER HERE

CLICK LINK

HOVER HERE

CLICK LINK

Jika Anda ingin membuat tombol hover dengan Flip Style Effect, seperti 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 Page"> <div> HOVER HERE</div> <a href="#">CLICK LINK</a> </div> <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> .................sandalplastik.blogspot.com">
Note :
Untuk melihat seluruh isi kode pemasangan html diatas.?

1. Arahkan mouse kepojok kanan bawah
2. Lalu seret hingga seluruh kode dapat di copypaste

Tipe Font	-- Book Antiqua Times New Roman Georgia Arial Tahoma Trebuchet Verdana Century Gothic Comic Sans
Warna Font
Ukuran Huruf
Reset?

Tombol Hover Dengan 4 Style Effect :
Tombol LINK 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.

Share: