css ile background kullanımına örnek olarak hazırladığım bir düğme örneği.

herkese kolay gelsin



<style type="text/css">
<!--
.dc_link { display:block; color:#fff; font-size:12px; font-weight:bold; background:url(gorsel/dc_sg1.jpg) no-repeat top right; text-decoration:none;}
.dc_link:hover { cursor:pointer; background:url(gorsel/dc_sg1.jpg) no-repeat top right; background-position:right -75px; color:#26528e;}
.dc_ic { display:block; height:22px; padding:4px 6px 0px 6px; background:url(gorsel/dc_sl1.jpg) no-repeat top left;}
.dc_link:hover .dc_ic { background:url(gorsel/dc_sl1.jpg) no-repeat top left; background-position:0px -75px;}
.baglac {padding-right:1px}
-->
</style>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td class="baglac"><a href="#" class="dc_link"><span class="dc_ic">ANA SAYFA</span></a></td>
    <td class="baglac"><a href="#" class="dc_link"><span class="dc_ic">FLASH WEB TASARIM</span></a></td>
    <td class="baglac"><a href="#" class="dc_link"><span class="dc_ic">CSS WEB TASARIM</span></a></td>
</tr>
</table>


demo ve resim dosyaları için:
http://www.flashwebtasarimi.com/csswebtasarimi002.html#dugmeler