Üzerine Gelince Renk Değiştiren Buton Yapımı Anlatımı

[Adil S.]

Ö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 :


Öncelikle linkimizi verelim..

Kod: Tümünü Seç Tümünü Kopyala

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

Linkimizi verdik, şimdi CSS kodları..

Kod: Tümünü Seç Tümünü Kopyala

.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: Tümünü Seç Tümünü Kopyala

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: Tümünü Seç Tümünü Kopyala

a:hover.yenikonu {
background-position: 0 -30px;
text-decoration: none;
}

Hayırlı olsun Teşekkür için rep verebiliriniz.:)

[Virüs]

Teşekkürler.

[Adil S.]

Rica ederim.

[TaaRRuz]

Teşekkrler.

[Adil S.]

Rica ederim.

[Blazed]

Teşekkürler

[Adil S.]

Rica ederim.

[Adil S.]

Rica ederim.

[Geveze]

Teşekkürler Fakat Çooookk Uzun İş :D