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

[ThE JoKeRR]

Öncelikle bir süre önce http://www.blackinci.com daki anlatımı okuyup öğrendiğim blackinci hocamıza ve CSS e başlamamı sağlayan ustam Baybars'a sonsuz teşekkürler..

Ö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;
}

Bu Kadar Hak Ettiysem +Rep

[XR's]

Nerye eklicez?

[тнє נσкєяs]

Güzel Anlatım Saol Kardesim..

[L34DRi]

Anlatım için teşekkürler.Ancak basit HTML kodu ile de yapılabilir:

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

onmouseout 


Normal buton

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

onmouseover 


Mouse üzerine gelince.

Kullanım şekli (Destek forumdaki kullanım):

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

<img onmouseout="this.src='http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply1.png';" title="Yeni Cevap" alt="Yeni Cevap" onmouseover="this.src='http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply2.png';" src="http://st.10tl.net/tema/smeaqol/destek10tl/postbit/newreply1.png">