logo

Tlačítka ve stylu Skype pomocí MooTools

Před několika týdny expert na jQuery Janko Jovanovic vypustil sladký návod, jak vytvořit tlačítko podobné Skype pomocí jQuery. Jankův článek na mě udělal dojem, a tak jsem se rozhodl přenést efekt do MooTools.

Zobrazit ukázku

XHTML

	<a class="skype-button" href="#"><img src="skype-button.png" alt="Button" />Contact Us!</a>

Toto je přesný kód poskytnutý Jankem.

CSS

.skype-button {
	 padding:4px 10px 3px 25px;
	 border:solid 1px #8AB134;
	 position:relative;
	 cursor:pointer;
	 display:inline-block;
	 background-image:url('skype-bkg.png');
	 background-repeat:repeat-x;
	 font-size:11px;
	 height:16px;
	 text-decoration:none;
	 color:#40740D;
	 -moz-border-radius-bottomleft:5px;
	 -moz-border-radius-bottomright:5px;
	 -moz-border-radius-topleft:5px;
	 -moz-border-radius-topright:5px;
}
.skype-button img {
	 position:absolute;
	 top:-4px;
	 left:-12px;
	 border:none;
}
.skype-button:hover {
	 color:#8AB134;
}

Toto je také přesný kód poskytnutý Jankem.

JavaScript MooTools

window.addEvent('domready',function() {
	$$('a.skype-button').each(function(el) {
		var img = el.getElement('img'), running = false;
		var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });
		var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {
				fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});
			}
		});
		el.addEvent('mouseenter',function() {
			if(!running) {
				fx1.start({'top':'-10px'}).start({'top':'-4px'});
				running = true;
			}
		});
	});
});

K vytvoření odrazu používáme duální FX instance. Fx.Transitions v současné době neumožňuje tento odrazový efekt a řetězová funkčnost MooTools nezobrazuje efekt tak pěkně.

Zobrazit ukázku

Rekvizity Jankovi za jeho původní článek!