Mybb-Tr.gg Tasarımcınız - Üzerine Gelince Değişen Buton

Öncelikle mantığı biraz kavratmak istiyorum..
Elimizde örn; 120x60 px bir resim var, CSS kodlarını buna göre düzenlediğimizde boşken 120x30 px lik kısım gözükürken üstüne gelince 120x -30 px lik kısım görünecek..

Anlatıma geçelim..

Butonumuz şu şekilde olacak :
[Resim: yenikonujb4.png]

Öncelikle linkimizi verelim..

Kod:
<a href="yönlenecek link" class="yenikonu"></a>

Linkimizi verdik, şimdi CSS kodları..

Kod:
.yenikonu {

width: 120px;

height: 30px;

background: url(yenikonu.png) top left no-repeat;

float: right;

}

Sağa dayadık, genişliğini ve yüksekliğini ayarladık..

Kod:
a.yenikonu {

display: block;

width: 120px;

height: 30px;

background: url(yenikonu.png) top left no-repeat;

text-decoration: none;

}

block kodumuzu da ekledikten sonra son kodumuza geçiyoruz..

Kod:
a:hover.yenikonu {

background-position: 0 -30px;

text-decoration: none;

}