Mootools Slider Buton

Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.

İlk olarak javascript kodlarımızdan başlayalım



<script type="text/javascript" src="mootools-1.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$$('.slidebttn').each(function(btn) {
var prev = btn.getPrevious('a').set('tween',{ duration: 500 })
var span = prev.getElement('span')
btn.addEvents({
mouseenter: function(e) {
btn.addClass('a')
prev.tween('width',225)
span.fade('in')
},
mouseleave:function(e) {
btn.removeClass('button_c')
prev.tween('width',70)
span.fade('out')
}
})
})
})
</script>

Html Kodlarımız


<div id="content">
<div class="button_wrap">
<a class="button_aRight" id="button_aLeft"><span style="visibility: hidden; opacity: 0;">Facebook'a giriş yapma</span></a>
<a class="button_bRight slidebttn" id="button_bRight">Facabook</a>
</div>
<div class="button_wrap">
<a class="button_aRight" id="button_aLeft"><span style="visibility: hidden; opacity: 0;">Twitter'a giriş yapma</span></a>
<a class="button_bRight slidebttn" id="button_bRight">Twitter</a>
</div>
</div>

3 thoughts on “Mootools Slider Buton

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir