Yeniden CSS Sprite ve harika bir sonuç! Bugün CSS‘de harika bir indir butonu yapacağız. Bir önceki yazımda CSS Sprite tekniğinin faydalarını anlatmıştım. İndir butonunu CSS Sprite tekniği ile yapmamın sebebi ise; son derece hızlı olması. Mesela; diğer teknikler ile yapılmış bir butonun üzerine geldiğiniz zaman birkaç saniye bekledikten sonra hover hali açılır. CSS Sprite tekniğinde ise resmin normal hali yüklendiyse yani ekranınızda görüntüleniyorsa, ikinci halide yani hover halide yüklenmiş demektir. Bu şekilde görüntülenen bir buton ziyaretçiye harika bir görüntü sunar. (:
Önceki CSS Sprite anlatımımda menü üzerine yazıları Photoshop‘ta yazarak anlatmıştım. Bu sefer CSS’de yazı özelliklerine de hafiften değinmek açısından butonlar üzerinde yazıları HTML kısmında yazdım. Böylece bloglarınıza eklediğiniz ve ziyaretçiler tarafından indirilmesini isteğiniz programların, dosyaların, ses dosyaların vb. adını yazarak indirilmesini sağlayabilirsiniz. Örnek verecek olursak; Blogunuzda paylaştığınız bir WordPress temasının adını yazarak indirilmesini sağlayabilirisiniz. “WordPress SY Temasını İndir” gibi…
Yaptığım butonu 250px genişlikte ve 51px yükseklikte olacak şelikde ayarladım. Buton üzerine yazılan yazılar ise butonun hem dikey hem de yatay olarak ortasında yer almakta. İsterseniz hemen kodları yazmaya başlayalım.
CSS Kodumuz:
#buton-one{
background-image:url(buton.png);
background-position:0px 0px;
width:250px;
height:37px;
padding-top:14px;
}
#buton-one:hover{
background-position:-250px 0px;
}
#buton-one a{
font-size:17px;
font-family:Myriad Pro;
text-decoration:none;
color:#fff;
}

HTML Kodumuz:

İşte tüm kodlarımız bu kadar.

Kaynak: http://ugurdalkiran.com/css-sprite-ile-indir-butonu-yapalim.html