Merhaba arkadaşlar bugün sizler ile css ve tabikide html kullarak aktif buton yapacağız. Bundan sonraki makalemde büyük bir ihtimalle aktif menü yapacağım. Aktif teriminden kasıt mause ile resimin üzerine gelindiğinde ise farklı bir resmin atanmasıdır. Öncelikle resimlerimizi hazırlamak için resim aracı lazım misal ben photoshop kullanıyorum 120X35 px boyutlarında bir yeni çalışma açtım ve 120X70 px boyutlarında bir dosyaya çevirdim.

Resimimizi hazırladığımıza göre kodlama işlemine başlayalım, ilk olarak html kısmını halledelim.

Resimin gideceği bir link yazdık ve gonder sitilini atadık.Css sitil kodlarını yazmaya başlayalım.

.gonder {
background: url(buton.png) top left no-repeat;
width: 120px;
height: 35px;
}

Yukarıdaki kodlar ile bir resim atadık .gonder sitiline, genişlik ve yükseklik değerlerini ayarladık.

a.gonder {
background: url(buton.png) top left no-repeat;
text-decoration: none;
display: block;
width: 120px;
height: 35px;
}

Yukarıdaki kodlar ilk başladığımız kodlardan farkı linklerin altında bir çizgi çıkmamasını istedik ve block özelliğini ayarladık.

a:hover.gonder {
background-position:0 -35px;
text-decoration: none;
}

Yukarıdaki kodlar ilede aktif butonumuzun rol alması için resimi -35px yukarı kaydırdık ve yine linklerin altında çizgi çıkmamasını ayarladık.

#Tabikide grafikler ve butonun boyutları kendinize göre ayarlanabilir ben 35px yaptım çünkü demo sayfasında daha güzel gözükmesi için bir indirme linki hazırladım sizler için içerisinde her iki butonunda psd leri bulunmaktadır.
DEMO | buton-yapimi.rar [51,82 Kb] (İndirilme Sayısı: 8) (rar şifresi: resulunal.com)