https://instagram.com/alphazzers
   
Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 5
  • 1
  • 2
  • 3
  • 4
  • 5
Üzerine Gelince Renk Değiştiren Buton Yapımı Anlatımı
#1
Ö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 :
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;
}

Hayırlı olsun Teşekkür için rep verebiliriniz.:)
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#2
Teşekkürler.
Ara
Cevapla PGM
Teşekkür verenler:
#3
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#4
Teşekkrler.
“Mazlumun zalimden öcünü alacağı gün,
şüphesiz zalimin zulmettiği günden daha çetin olacaktır !"
Hz. Ali (r.a)

Kuş ölür, sen uçuşu hatırla...
Ara
Cevapla PGM
Teşekkür verenler:
#5
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#6
Teşekkürler
Ara
Cevapla PGM
Teşekkür verenler:
#7
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#8
Rica ederim.
Tekrar Genel Şef...
ÜCRETLİ TASARIM İŞLERİNİZ YAPILIR !
Ara
Cevapla PGM
Teşekkür verenler:
#9
Teşekkürler Fakat Çooookk Uzun İş :D
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 6 Ziyaretçi



Reklam yaziniz bostur. ayarlardan duzenleyiniz:medi -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping