Animated Hover Link Menggunakan CSS3

Ini hanyalah sebuah bentuk sederhana penggunaan CSS3 yang berfungsi menciptakan animasi hover link yang mungkin akan dapat sobat manfaatkan bersama untuk memperindah penampilan blog. Bentuk kode yang akan kita gunakan amatlah sederhana sehingga tak akan sulit untuk dipasang di blog, baik sebagai tambahan kode atau menggantikan kode css yang sudah ada.

Penggunaan CSS3 kini mulai terdukung secara menyeluruh oleh browser yang ada, menjadikan lebih banyak peluang dan kesempatan bagi blogger untuk menciptakan berbagai kreatifitas baru dengan hanya memanfaatkan kode CSS. Salah satunya adalah hover link yang akan coba kita bahas.

Animasi yang coba kita terapkan pada hover link bisa dikatakan hanyalah bentuk yang teramat simple dan terlebih memang pemberian animasi yang berlebihan justru akan membuatnya mejadi tidak sedap dilihat. Untuk itu kita hanya akan melibatkan dua bentuk animasi dengan CSS3 transition dan CSS3 transformation. Hal yang coba kita animasikan adalah pada text-shadow, dan font-size melalui transformasi skala.

Sobat blogger bisa lihat demonya pada blog saya ini. Ok, gimana ? Kalau sobat berminat silahkan ikuti langkah-langkah berikut ini :

1. Log ini ke akun blogger sobat;
2. Pilih menu Rancangan » Edit HTML;
3. Beri tanda centang pada tulisan Expand Template Widget;
4. Carilah kode a { atau a{ setelah jumpa, ganti semua kode yang ada didalamnya dengan kode berikut ini;

a {
   font-weight: bold;
   text-decoration: none;
   color: blue;
   -webkit-transition: all .85s ease;
   -moz-transition: all .85s ease;
   -o-transition: all .85s ease;
   transition: all .85s ease;
   }

a:hover {
   color: red;
   text-shadow:1px 1px 2px #000;
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -o-transform: scale(1.1);
   transform: scale(1.1);
   text-decoration: dotted blue;
   }

5. Setelah itu simpan template sobat