CSS ile bir kutu hazırlıyoruz. Ve transition sayesinde kutunun üzerine gelince renk değiştirmesini sağlıyoruz.

1
#aw_table3 a{
2
transition:background .3s ease,background .3s linear;
3
-moz-transition:background .3s ease,background .3s linear;
4
-o-transition:background .3s ease,background .3s linear;
5
-webkit-transition:background .3s ease,background .3s linear;
6
-ms-transition:background .3s ease .3s
7
}
8
 
9
#aw_table3 a{font:bold 12px Arial, Helvetica, sans-serif; background-color:#666; color:white; padding:15px 50px 15px 50px;margin:0px; text-decoration:none;}
10
<span style="font-family: Consolas, Monaco, monospace;">
11
</span>#aw_table3 a.birinci:hover{background-color:#d93d4a;}
12
#aw_table3 a.ikinci:hover{background-color:#3d69d9;}
13
#aw_table3 a.ucuncu:hover{background-color:#3dd96d;}
14
#aw_table3 a.dorduncu:hover{background-color:#d9ba3d;}

Yukarıdaki kodları CSS dosyamızda veya <style type=”text/css”>BURAYA</style> tagları arasına yazıyoruz.

1
<div id="aw_table3">
2
<a href="#" class="birinci">Link 1</a><a href="#" class="ikinci">Link 2</a><a href="#" class="ucuncu">Link 3</a><a href="#" class="dorduncu">Link 4</a>
3
</div>