Animated Hover Link Using CSS3

Ini hanyalah sebuah bentuk sederhana penggunaan CSS3 yang berfungsi menciptakan animasi pada hover link yang mungkin akan dapat kita 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 yang kini juga 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 hingga tiga bentuk animasi dengan CSS3 transition dan CSS3 transformation. Hal yang coba kita animasikan adalah pada background-color, text-shadow, dan font-size melalui transformasi skala.

Cara Untuk membuat animated hover link menggunakan CSS3

Kode CSS-1 :

a {
     font:12px Trebuchet MS;
     font-weight: bold;
     text-decoration: none;
     color: blue;
     cursor: pointer;
     -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: underline;
     background: #CCC;
     }

Jika hanya akan dipergunakan pada link-link tertentu, sampeyan dapat menambahkan sedikit kode baru (pembentuk class), seperti misalnya dengan kode seperti berikut (KODE CSS-2):

a.animacss3 {
     font:12px Trebuchet MS;
     font-weight: bold;
     text-decoration: none;
     color: blue;
     cursor: pointer;
     -webkit-transition: all .85s ease;
     -moz-transition: all .85s ease;
     -o-transition: all .85s ease;
     transition: all .85s ease; 
     }
a.animacss3: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: underline;
     background: #CCC;
     }

]]></b:skin>

Langkah untuk menambahkan kode CSS

Jika sampeyan menggunakan kode CSS-2, maka kode css tersebut langsung disimpan di atas kode ]]></b:skin>, sedang penulisan kode untuk link-nya seperti berikut:

<a class="animacss3" href="http://...../...../....">Link Title</a>

Lakukan prosedur berikut :

1. Login to BloGGeR
2. Dasboard : KLIK link "Design/Rancangan".
3. KLIK "Edit HTML"
4. Back-up Template : dengan cara KLIK "Download Full Template/Download Template Lengkap" dan kemudian SAVE/Simpan file Template di Folder PC (jika dipandang perlu).
5. Cari kode ]]></b:skin>, kemudian letakkan kode CSS-2 di atasnya.
6. KLIK "SAVE Template/Simpan Template".
7. Gunakan kode seperti contoh di bawah ini untuk menuliskan kode HTML link:
   <a class="animacss3" href="http://gubhugreyot.blogspot.com">gubhug reyot</a>

Kode CSS-1 untuk menggantikan kode link dan hover link yang sudah ada di blog

Kode CSS-1 dimaksudkan untuk mengganti kode CSS link dan hover-nya yang di semua blog sudah ada. Untuk menggunakan ini, maka sampeyan harus melakukan prosedur seperti langkah di atas, tetapi harus melakukan proses penghapusan terlebih dahulu terhadap syntax a {....} dan a:hover { ....} yang terdapat di template dan menggantikannya dengan kode CSS-1. Syntax yang tersebut berbentuk seperti contoh di bawah ini :

a:link {
     text-decoration:none;
     color: $(link.color);
     }
a:hover {
     text-decoration:underline;
     color: $(link.hover.color);
     }

atau mungkin seperti ini :

a {
     text-decoration: underline;
     font: bold 12px Sans-serif;
     font-weight: bold;
     color: #000;
     }
a:hover {
     text-decoration: none;
     color: #FF0000;
     }

Di bawah ini adalah bentuk Animated Hover Link Using CSS3

Animated Hover Link CSS3 (D E M O)

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «