CSS'de Rollover 1 ile Düğme Örneği

Rollover 1 CSS
Bu örnek için şu şekilde çalışacak 3 resmimiz olmalıdır;
dinlenmek

Üzerine

basılı

Sonra sitemizin gövdesinde buna sahibiz
Kod:


BAŞLANGIÇ

Ve böylece tüm butonlarımız için CSS kullanmamız gerekecek sonra şu kodla başlıyoruz:
Kod:

# bot1 {
sınır: 0 0 0 0;
dolgu: 0;
metin hizalama: merkez;
}
Dış ve iç kenar boşluğu istemediğimizi söylediğimizde yazıyı ortaya hizalıyoruz, şimdi bu kodla devam ediyoruz:
Kod:

# bot1'den {'e
arka plan resmi: url (bg_menu_1.jpg);
arka plan konumu: orta üst;
yükseklik: 30 piksel;
genişlik: 100 piksel;
Ekran bloğu;
renk: # 990000;
metin-dekorasyon: yok;
üst dolgu: 5px;
arka plan tekrarı: tekrar yok;
yazı tipi ağırlığı: kalın;
}
Neredeyse her şeyi yapan o, satır satır bakalım
arka plan resmi: url (bg_menu_1.jpg);
Bununla bir arka plan görüntüsü istediğimizi söylüyoruz ve bunun yolunu veriyoruz.
arka plan konumu: orta üst;
Bununla arka plan görüntüsünün konumunun ortalanmış ve yukarı doğru olacağını belirtiyoruz.
arka plan tekrarı: tekrar yok;
Böylece arka plan bir desenmiş gibi tekrar etmesin.

yükseklik: 30 piksel;
genişlik: 100;
Arka plan resimlerimizin boyutları olan yüksekliğin 30 ve genişliğin 100 piksel olacağını söylüyoruz.
Ekran bloğu;
Böylece daha önce koyduğumuz önlemlerle bir kutu oluşturur ve saygı duyar.
renk: # 990000
Bununla sadece kutumuzun içindeki metne bir renk veriyoruz.
metin-dekorasyon: yok;
Bağlantıların altındaki satırdan kaçınmaktır.
üst dolgu: 5px;
Böylece bağlantımızın üst kısmında 5px'lik bir boşluk bırakıyorum ve bununla konumu kutumuzun ortasına indiriyor.
yazı tipi ağırlığı: kalın;
Harfleri kalın yapar
O zaman sadece "vurgu" ve "odak" sözde öğeleri için sınıflar eklemeniz gerekir.
Kod:

# bot1 a: üzerine gelin {
arka plan resmi: url (bg_menu_2.jpg);
}
# bot1 için: odak {
arka plan resmi: url (bg_menu_3.jpg);
}
Ancak fark ettiğimiz gibi, aradığımız efekti elde etmek için yalnızca arka plan resimlerimizin yolunu değiştirdik.
bizim kod css'de rollover örneği aşağıda gösterilen:
Kod:








BAŞLANGIÇ


Ve görseller bu sayfadan görsele sağ tıklayıp farklı kaydederek indirilebilir.