Botones estilo Skype usando MooTools -

Hace unas semanas, el experto en jQuery, Janko Jovanovic, lanzó un interesante tutorial que muestra cómo crear un botón similar a Skype usando jQuery. Me impresionó el artículo de Janko, así que decidí trasladar el efecto a MooTools.

El XHTML

a href="#"img src="skype-button.png" alt="Botón" /¡Contáctenos!/a

Este es el código exacto proporcionado por Janko.

El CSS

.botón de skype { relleno:4px 10px 3px 25px; borde: sólido 1px #8AB134; posición: relativa; cursor:puntero; pantalla: bloquear en línea; imagen de fondo:url('skype-bkg.png'); repetición de fondo: repetición-x; tamaño de fuente: 11px; altura: 16px; decoración de texto: ninguna; 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 { posición:absoluta; arriba: -4px; izquierda: -12px; borde: ninguno;}.skype-button:hover { color:#8AB134;}

Este también es el código exacto proporcionado por Janko.

El JavaScript de MooTools

window.addEvent('domready',function() {$$('a.skype-button').each(function(el) {var img = el.getElement('img'), corriendo = false;var fx2 = new Fx.Morph(img, {duración: 100, enlace: 'cadena', onChainComplete:function() { running = false; } });var fx1 = new Fx.Morph(img, {duración: 200, enlace: ' cadena', 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;}});});});

Usamos instancias de efectos duales para crear el rebote. Fx.Transitions actualmente no permite este efecto de rebote y la funcionalidad de cadena de MooTools no mostró el efecto tan bien.

¡Felicitaciones a Janko por su artículo original!