Teks Link Hover Multi Effect

Teks Link Hover Multi Effect - Link terbentuk menggunakan tag <a dengan atribut href seperti ini: <a href="http://sahabatblogger77.blogspot.com">Teks</a>, maka dengan penyusunan elemen CSS yang kita letakkan pada halaman Template, berbagai macam tampilan effect link bisa kita buat dalam satu halaman posting saat teks link di hover seperti ini:

DEMO SHOW

Yang menjadi kendalanya adalah bagaimana membuat ragam effect (multi effect) pada teks link dalam satu halaman posting artikel.?. Kita ambil penyusunan CSS efek hover link yang biasanya terdapat pada struktur Template seperti ini:

a:link{max-width:100%;color:blue;text-decoration:none}
a:visited{color:blue}
a:hover{color:red}

Dengan susunan element CSS seperti diatas, maka semua teks yang dibuat menjadi link akan berubah warna menjadi BIRU, dan teks berganti warna MERAH jika di hover. Pertemuan kali ini saya akan coba memberikan 7 Effect Hover Pada Link yang bisa kita terapkan sekaligus dalam 1 halaman posting. Singkatnya jika Anda membuat atau menyisipkan 3 URL-link dalam postingan (internal link), maka kita bisa membuat effect yang berbeda-beda antara link yang satu dengan link yang lain saat teks di hover.

Anda temukan kode ]]></b:skin> di Template Anda, lalu letakkan semua kode CSS berikut tepat diatasnya. kode lengkapnya seperti ini:


/* 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%}}

Pada masing-masing pengaturan CSS sudah saya beri tanda dengan kode effect-1, effect-2, effect-3 dan seterusnya dan dengan efek yang berbeda-beda pula. Cara menggunakannya, Anda cukup panggil salah satu efek yang Anda sukai atau menerapkan efeknya sekaligus dengan menambahkan atribut class pada tag <a saat Anda menulis artikel. Contoh seperti ini:

<a href="http://URL-link Anda" class="effect-1">SAHABAT BLOGGER 77</a>

Cukup mudah bukan.? hehe..!! sambil mencoba-coba ke 7 efek diatas, baca juga yuk beberapa desain daftar isi ala SAHABAT BLOGGER 77 dibawah ini: