Cara Membuat Kotak Dengan Efek Gradasi dan Hover

Assalamu'alaikum Redviewers! Kali ini admin akan coba share cara membuat efek hover pada tabel, apa sih efek hover itu? contohnya tuh kaya menu bar yang diatas blog ini. jika cursor diarahkan ke menu maka akan berubah warna secara perlahan. Langsung saja berikut ini caranya.

Pertama simpan scriptnya terlebih dahulu, bisa di gadget html/javascript, atau di template blog redviewers scriptnya kaya gini :

<style>
.box{
      height:30px;
      background:-webkit-gradient(linear,left top,left bottom,from (#000000), to(#FF0000));
background:-moz-linear-gradient(top,#000000,#FF0000);
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      transition : background 0.4s ease-in-out;
      -webkit-transition : background 0.4s ease-in-out;
      -moz-transition : background 0.4s ease-in-out;
      -o-transition : background 0.4s ease-in-out;
}
.box:hover {
    background:#FF0000;
    transition : background 0.4s ease-in-out;
    -webkit-transition : background 0.4s ease-in-out;
    -moz-transition : background 0.4s ease-in-out;
    -o-transition : background 0.4s ease-in-out;
}
</style>

Kode yang merah adalah identitas scriptnya, yang biru silahkan kamu ubah dengan warna sesuai keinginan,dan yang pink adalah waktu lamanya hover.

Untuk memanggil kotaknya gunakan kode yang berwarna merah, seperti yang di bawah ini :

<div class='box'><font color='white' face='agency fb' size='4'><center><b>HOME</b></center></font></div>

Kode di atas bisa di simpan di add gadget > html/javascript, atau di template blog para redviewers, tinggal diatur-atur aja.Kalo disimpan di gadget html/javascript keseluruhan kodenya jadi begini :

   <style>
.box{
      height:30px;
      background:-webkit-gradient(linear,left top,left bottom,from (#000000), to(#FF0000));
      background:-moz-linear-gradient(top,#000000,#FF0000);
      -webkit-border-radius:2px;
      -moz-border-radius:2px;
      transition : background 0.4s ease-in-out;
      -webkit-transition : background 0.4s ease-in-out;
      -moz-transition : background 0.4s ease-in-out;
      -o-transition : background 0.4s ease-in-out;
}
.box:hover {
    background:#FF0000;
    transition : background 0.4s ease-in-out;
    -webkit-transition : background 0.4s ease-in-out;
    -moz-transition : background 0.4s ease-in-out;
    -o-transition : background 0.4s ease-in-out;
}
</style>

<div class='box'><font color='white' face='agency fb' size='4'><center><b>HOME</b></center></font></div>

nah gimana nih sekarang udah ngerti kan? mudah-mudahan bermanfaat. Glory!!