Merhabalar. CSS ile değişen buton yapımını öğreneceğiz. Hemen dersimize geçelim

İlk önce üzerine gelmeden önce yani resmimizin ilk halinin kodunu yazalım ve şeffaflık değerini “30″ olarak verelim ;

.l_opac {
-moz-opacity:0.3;
filter:alpha(opacity=30);
}

Bu kodla birlikte resmimizin şeffaflığı 30 olacaktır. Şimdi ise üzerine gelindiğinde alacak değerini yazalım yani “100″ ;

.f_opac {
-moz-opacity:1;
filter:alpha(opacity=100);
}

CSS kodlarımız bukadar şimdi HTML kodlarımızı yazmaya geçelim.

<img src=”buton.png” border=”0″ class=”l_opac” onmouseover=”this.className=’f_opac;’” onmouseout=”this.className=’l_opac’;”> 

Eğer bu butona link vermek istiyorsak da aşağıdaki kodu kullanmamız yeterli olacak.

<a href=”http://www.baybars.net”><img src=”buton.png” border=”0″ class=”l_opac” onmouseover=”this.className=’f_opac;’” onmouseout=”this.className=’l_opac’;”></a> 

Çalışır Bir Örneğini Görmek İsterseniz Tıklayın