Membuat Teks Link Hover Multi Effect

Berikut ini akan diuraikan langkah-langkah cara membuat ( Teks Link Hover Multi Effect ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( Teks Link Hover Multi Effect ) sebagai berikut :

DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

/* Link Style Hover Multi Effect
Edition line: page one experiment show
Visit - http://sahabatblogger77.blogspot.com
Modified by. Devy Indriyani at March 15, 2015 */
.effect-1 {
border-bottom: 1px solid #c9e27f;
box-shadow: inset 0 -3px 0 #c9e27f;
color: rgba(15, 35, 59, 0.55);
-webkit-transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
padding: 2px 2px 0 2px}

.effect-1:hover {background-color: #c9e27f;}
.effect-2 {
color: blue;
-webkit-transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1);
-moz-transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1);
transition: box-shadow 0.25s cubic-bezier(0.32, 0.75, 0.25, 1)}

.effect-2:hover {box-shadow: inset 0 -1.15em 0 #f1e12d;color:#111}
.effect-3,.effect-4 {color: #3588b4;position: relative;padding-bottom: 2px}
.effect-3:after,.effect-4:after {
content: '';position: absolute;bottom: 0;left: 0;height: 2px;
background-color: #6ebde7;width: 0%;display: block;
-webkit-transition: width .5s ease-in-out;
-moz-transition: width .5s ease-in-out;
transition: width .5s ease-in-out}

.effect-3:hover, .effect-4:hover {color: black}
.effect-3:hover:after, .effect-4:hover:after {width: 100%}
.effect-4 {color: #e76ea7;z-index: 3}
.effect-4:after {background: rgba(231, 110, 167, 0.4);height: 1.25em;z-index: -1}
.effect-4:hover {color: black}
.effect-5 {
color: #e44040;padding-bottom: 2px;border-bottom: 0px solid black;
-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;padding-top: 2px;border-top: 0px solid black}

.effect-5:hover {border-bottom-width: 2px;border-top-width: 2px}
.effect-6 {color: #994cb9;position: relative;padding-bottom: 2px}
.effect-6:after {
content: '';height: 2px;background: #742794;width: 0;
position: absolute;bottom: 0;left: 0}

.effect-6:hover:after {
width: 100%;
-webkit-animation-duration: .6s;
-moz-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-name: bordergrow;
-moz-animation-name: bordergrow;
animation-name: bordergrow;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
animation-iteration-count: 1}

.effect-7:hover {
-moz-transform:rotateY(-360deg);
-webkit-transform:rotateY(-360deg);
transform:rotateY(-360deg);
background: #660000;
box-shadow: inset 0px 2px 0 0 yellow;
color:#fff}

.effect-7 {
background: red;
-webkit-transition: 1.3s;-webkit-transform-style: preserve-3d;
-moz-transition: 1.3s;-moz-transform-style: preserve-3d;
transition: 1.3s;transform-style: preserve-3d;
padding:2px 4px;color:aqua}

@-webkit-keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}
@-moz-keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}
@keyframes bordergrow {0% {left: 50%;width: 10%}100% {left: 0;width: 100%}}

HTML Kode

<a href="http://URL-link Anda" class="effect-1">SAHABAT BISNIS 77</a>
Silahkan panggil effect setiap ingin membuat text link contohnya effect-1, effect-2 dst

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( Teks Link Hover Multi Effect ) semoga bermanfaat terima kasih.

CONTOHNYA

Saat pertama kali memulai sebuah bisnis, fokus Anda tentu ada pada pengembangan dan strategi mendapatkan konsumen. Namun setelah beberapa periode berlalu, maka perhatian akan secara alami berubah pada bagaimana usaha tersebut berkembang dan pencapaian apa yang sudah dilakukan.

Dalam perkembangannya, terdapat beberapa pertanyaan sederhana yang ternyata dapat mengevaluasi jalannya usaha Anda. Apa sajakah pertanyaan tersebut? Mari simak ulasan lengkap yang telah disiapkan tim redaksi berikut ini:
Pertama menggunakan effect-1
Bagaimana cara Mempekerjakan atau Memecat?
Kedua menggunakan effect-2
Bagaimana cara mendapatkan konsumen dan berapa banyak?
Ketiga menggunakan effect-3
Bagaimana mendapatkan Pelanggan Tetap?
Keempat menggunakan effect-4
Bagaimana Membuktikan Janji yang Disebutkan?
Kelima menggunakan effect-5
Bagaimana Grafik Penjualan Selama Ini?
Keenam menggunakan effect-6
Bagaimana Sistem yang Diberlakukan Memudahkan Pelanggan?