1.Adım:
Butonun Tasarlanması
Photoshop Veya Başka Bir Programda Butonumuzu Tasarlıyalım
Her İki Butonun Aynı Boyutlarda Olması Gerikiyor.
2.Adım: HTML Sayfa İçerisine Aktarma
<!-- Jquery -->
<div id="kapsa">
<img id="renksiz" src="bt1.png" alt="" />
<img id="renkli" src="bt2.png" alt="" />
</div>
<!-- Jquery -->
3.Adım: CSS İle Konumlandırma
#kapsa
{
width:174px;
height:48px;
}
#renkli
{
width:174px;
height:48px;
}
#renksiz
4.Adım: JQuery İle Animasyon
<script type="text/javascript">
Tagları Arasına Kodu Eklemek.
</script>
$(document).ready(function(){
$('#kapsa').hover( gizle, goster );
function gizle(){
$('#renksiz').fadeOut('slow')
}
function goster(){
$('#renksiz').fadeIn('slow')
}
});
{
position:absolute;
width:174px;
height:48px;
}
Son Halini Görmek İçin "http://fake-design.tr.gg/buton.htm"