Efek Link Menggunakan CSS3

Dengan berkembangnya CSS3 kita bisa bisa melakukan inovasi pada tautan atau link yang disorot (hover) menjadi lebih variatif, misalnya efek bergoyang (nudging) dan lain-lain, sebelumnya efek animasi seperti ini biasanya dibuat menggunakan kode JavaScript, namun tidak untuk kali ini, karena kita akan mencoba menginovasikannya menggunakan kode CSS3, penasaran?

Efek Link Menggunakan CSS3

1. Efek Link Nudging

Saya menyebutnya link bergoyang, cara kerjanya ketika link disorot atau dihover link akan bergoyang ke kanan.

Demo

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

<ul class="animateList">
  <li><a href="#">Tautan Satu</a></li>
  <li><a href="#">Tautan Dua</a></li>
  <li><a href="#">Tautan Tiga</a></li>
  <li><a href="#">Tautan Empat</a></li>
</ul>

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

Sekarang kita akan mencoba memodifikasi kode link nudging di atas dengan menambahkan efek background gradient.

Demo

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

<ul class="animateList">
  <li><a href="#">Tautan Satu</a></li>
  <li><a href="#">Tautan Dua</a></li>
  <li><a href="#">Tautan Tiga</a></li>
  <li><a href="#">Tautan Empat</a></li>
</ul>

.animateList {
	margin:10px 10px;
	padding:0px 0px;
}
.animateList li {
	list-style:none;
	margin:0px 0px;
	padding:0px 0px;
}
.animateList li a {
	text-decoration:none;
	display:block;
	overflow:hidden;
	padding:5px 10px;
	background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(230,230,230,0.4));
	background-image:   -moz-linear-gradient(left,transparent,transparent 30%,rgba(230,230,230,0.4));
	background-image:    -ms-linear-gradient(left,transparent,transparent 30%,rgba(230,230,230,0.4));
	background-image:     -o-linear-gradient(left,transparent,transparent 30%,rgba(230,230,230,0.4));
	background-image:        linear-gradient(left,transparent,transparent 30%,rgba(230,230,230,0.4));
	-webkit-background-size:200% 100%;
	   -moz-background-size:200% 100%;
	        background-size:200% 100%;
	webkit-transition: all 0.26s ease-out;  /* Saf3.2+, Chrome */
	  -moz-transition: all 0.26s ease-out;  /* FF4+ */
	   -ms-transition: all 0.26s ease-out;  /* IE10? */
	    -o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
}
.animateList li a:hover {
	background-position:100% 100%;
	padding-left:15px;
}

—ς∞ς— 

sumber kode: http://www.dte.web.id

2. Efek Animasi Link Menggunakan CSS3 Transform

Untuk melihat demo silakan sorot atau hover link berikut ini.

Demo

1. Tautan Satu
2. Tautan Dua
3. Tautan Tiga
4. Tautan Empat

<ol class="animateList">
  <li><a href="#">Tautan Satu</a></li>
  <li><a href="#">Tautan Dua</a></li>
  <li><a href="#">Tautan Tiga</a></li>
  <li><a href="#">Tautan Empat</a></li>
</ol>

.animateList 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);
}
.animateList 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);
}
.animateList 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);
}

—ς∞ς— 

sumber: http://rudyazhar.com

3. Efek Link Dengan Warna pelangi

Efek pelangi pada link akan muncul ketika link dihover atau di sorot

Demo

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

<ul class="animateList">
  <li><a href="#">Tautan Satu</a></li>
  <li><a href="#">Tautan Dua</a></li>
  <li><a href="#">Tautan Tiga</a></li>
  <li><a href="#">Tautan Empat</a></li>
</ul>

.animateList a  {
	padding:4px;
	max-width:300px:
	display: block;
}
.animateList a:hover  {
	color: #F3A01E; /* Fallback */
	text-decoration: none;
}
.animateList a:hover {
	-webkit-background-clip: text;
	color: white;
	-webkit-text-fill-color: transparent;
	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);
	background-image:        -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363));
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	     -o-border-radius: 4px;
	        border-radius: 4px;
}

—ς∞ς— 

sumber: http://rudyazhar.com

Tweet

Postingan terkait:

Ditulis EM — Thursday 16 May 2013 — Add Comment — CSS3