Css Buton (Tuş) Yaratımı
İşte burada gördüğünüz gibi buton yarattık ama üstüne gelince farklı bi resim alıyo arkayı diyoruz peki bu nasıl oluyor??? Sorunun yanıtı işte burada 
İşte resmin orjinali bu butonda kullandığımız.
<p style="display: none;"><input alt="Spam me" name="Send" class="send-btn" type="submit" value="Spam me" id="Send" xsrc="/img/btn.gif" mce_src="/img/btn.gif" /></p><p><input alt="Spam me" name="Send" class="send-btn" type="image" id="Send" xsrc="/img/btn.gif" mce_src="/img/btn.gif" tabindex="5" /></p>
Burada kullanılan /img/btn.gif resmi direk üstteki 2 butonun resmi olan resimdir.
input.send-btn { width: 130px; height: 25px; background: #333 url(/img/btn-send.gif) no-repeat; outline: none; } input.send-btn:hover { background: #666 url(/img/btn-send.gif) no-repeat 0 -25px; } CSS kodlarını bu şekilde derliyoruz ve
input.send-btn:hover Buradaki hover kısmında no-repeat 0-25px demek resmimizi alttan -25 aralığından sonra görüntülenmesini sağlamaktadır. Buda bizim resmimizde görünen alttaki bölümdür. Şimdi diyeceksiniz ki buna ne gerek var 2 farklı resim kullanabilirdik?Tabiki kullanabilirdik ama tek dosya ve kb cinsinden tasarruf ve hızlı sayfa izlenimleri yaratmaktir. Teşekkürler
