onmouseover-buton.jpgHareketli buton hazırlamak için elimizde 2 tane aynı boyutta resim dosyası olması gerekiyor bunları photoshop ya da gimp gibi programlarla oluşturabilirsiniz. İlk resim normal halde ikinci ise mouse işaretçisi linkin üzerine geldiği zaman aktif olacak.Resimleri hazırladıktan sonra kullanmamız gereken kod şu şekilde :

<html><head>
<style type=”text/css”>
#buton a
{
display:block;
width:150;
height:35;
background:url(resimnormal.jpg) no-repeat;
color:white;
text-decoration:none;
font-family:tahoma,verdana;
font-size:12px;
font-weight:bold;
text-align:center;
line-height:35px;
}
#buton a:hover {
background:url(resimonmouseover.jpg) no-repeat;
}
</style>

</head>
<body>
<div id=”buton“>
<a href=”#”>Link</a>
</div>

</body></html>

Kodların “#buton a” bölümünde linkin normal haldeki “#buton a:hover” bölümünde ise üzerine geldiğimiz haldeki durumunu belirttik.

Tags: , , , , , ,