Beragam Macam Efek Link With CSS3

Dengan berkembangnya CSS3 tautan yang akan disorot (hover) bisa dibuat lebih bervariasi lagi, tidak hanya berganti warna ataupun adanya penambahan garis bawah akan tetapi bisa dibuat dengan efek animasi.

Efek animasi ini sebelumnya hanya bisa dibuat dengan javascript tapi tidak untuk saat ini, dengan CSS3 kita bisa membuatnya dan sama sekali tanpa menggunakan javascript.

Berikut beberapa efek link/tautan/pranala dengan CSS3 :

Efek Link Nudging

Efek ini sudah banyak yang tahu karena memang sudah agak lama dan biasanya efek animasinya dibuat dengan kode transition: padding-left 250ms ease-out; tapi saya memakai cara transition: all 0.26s ease-out;

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

#animateList li a {
-moz-transition: all 0.26s ease-out;  /* FF4+ */
-o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.26s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.26s ease-out;  /* IE10? */
}
#animateList li a:hover {
padding-left: 9px;
}

Efek Link Nudging dengan background gradient

Efek ini sama dengan yang pertama hanya ada penambahan gradient pada backgroundnya, sama persis seperti yang saya buat pada Tulisan Terkait dibawah.

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

#animateList1 li a {
display: block;
width:25%; /* lebar bisa dihapus atau disesuaikan */
overflow: hidden;
background: -webkit-linear-gradient(left, transparent, transparent 50%, rgba(0, 0, 0, 0.2));
background: -moz-linear-gradient(left, transparent, transparent 50%, rgba(0, 0, 0, 0.2));
background: -ms-linear-gradient(left, transparent, transparent 50%, rgba(0, 0, 0, 0.2));
background: -o-linear-gradient(left, transparent, transparent 50%, rgba(0, 0, 0, 0.2));
background-size: 200% 100%;
-moz-transition: all 0.26s ease-out;  /* FF4+ */
-o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.26s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.26s ease-out;  /* IE10? */
}
#animateList1 li a:hover {
background-position: 100% 100%;
padding-left: 9px;
}
#animateList1 li a:hover {
text-decoration: underline;
}

♥ Inspirasi : CSS-Tricks.

CSS3 Transform Effect

Efek ini saya lihat di situsnya Christoph Pojer, tapi beliau menggunakan javascript untuk membuat efeknya.



Menu Satu | Menu Dua | Menu Tiga | Menu Empat

.cpojer-links a  {
display: inline-block;
padding: 4px;
outline: 0;
color: #a647d8;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
background: #a647d8;
text-decoration: none;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}

Rainbow link

Saat tautan/link disorot maka akan tampak seperti efek pelangi tapi hasil akhirnya akan berbeda saat kita lihat menggunakan peramban Firefox dengan Chrome.

• Tautan Satu
• Tautan Dua
• Tautan Tiga
• Tautan Empat

.rainbow a  {
max-width:300px:
display: block;
}
.rainbow a:hover  {
color: #F3A01E; /* Fallback */
}
.cssgradients .rainbow a:hover {
-webkit-background-clip: text;
color: white;
-webkit-text-fill-color: transparent;
background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:    -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:     -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
background-image:      -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79);
}

♥ Inspirasi : CSS-Tricks.

Blurred Links

Tautan/link kabur/blur, saat disorot menjadi terang:



Blur-in link 1 | Link 2 | Link 3

Tautan/link saat disorot akan menjadi kabur/blur:



Blur-out link 1 | Link 2 | Link 3

a.blur {
text-decoration: none;
color: #339;
}
a.blur:hover, a.blur:focus {
text-decoration: underline;
color: #933;
}
.textshadow a.blur, .textshadow a.blur:hover, .textshadow a.blur:focus {
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}
.textshadow a.blur,
.textshadow a.blur.out:hover, .textshadow a.blur.out:focus {
text-shadow: 0 0 4px #339;
}
.textshadow a.blur.out,
.textshadow a.blur:hover, .textshadow a.blur:focus {
text-shadow: 0 0 0 #339;
}

Alamat URL Rujukan →

Simpulan

Diatas hanya beberapa contoh saja, sebenarnya masih banyak lagi efek yang bisa kita buat untuk link/tautan ini dengan menggunakan CSS3.

Fungsi-fungsi javascript lambat laun mulai bisa diantisipasi dengan penggunaan CSS saja walau tidak semuanya.

Mungkin dari Anda ada yang bisa menambahkan ? Silahkan berbagi…