Skype-Style Buttons Using MooTools

By  on  

A few weeks back, jQuery expert Janko Jovanovic dropped a sweet tutorial showing you how to create a Skype-like button using jQuery. I was impressed by Janko's article so I decided to port the effect to MooTools.

The XHTML

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

This is the exact code provided by Janko.

The 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;
} 

This too is the exact code provided by Janko.

The MooTools JavaScript

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;
			}
		});
	});
});

We use dualing FX instances to create the bounce. Fx.Transitions doesn't currently allow for this bounce effect and MooTools' chain functionality didn't display the effect as nicely.

Props to Janko for his original article!

Recent Features

  • By
    I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

  • By
    Use Elements as Background Images with -moz-element

    We all know that each browser vendor takes the liberty of implementing their own CSS and JavaScript features, and I'm thankful for that. Mozilla and WebKit have come out with some interesting proprietary CSS properties, and since we all know that cementing standards...

Discussion

  1. Simple and clear.. but I don’t understand why two morph effect? What happen if you use only one morph.fx with chain for go up and down?
    (it’s not a criticism, it’s only to understand)

  2. @nunzio fiore: Separating the different speeds.

  3. ah ok :)
    for a nicer effect…
    but if somebody wanna made it simple with only a speed.. there s no problem using only an fx. now it’s clear. thx again.
    nunzio

  4. olivier

    Shouldn’t fx1 event be onChainComplete like for fx2 instead of onComplete? I’m asking because fx1 starts two animations, meaning the on complete event would fire twice

  5. Catar4x

    No demo ?

  6. Shit, the demo wasn’t coming through. It’s there now.

  7. Thanks for the compliments, David! It’s nice to see it working with MooTools as well (or is it jTools now?)

  8. this is cool, but how about adding a periodical to the function so that it continues the effect over and over while the mouse hovers over the button?

  9. o yes, I wanted to ask about browser support as well? Does it work in IE6?

  10. @Adriaan: I tried to prevent that actually. I think if you remove the “running” code, it will do what you’re asking.

  11. @Adriaan: Yes, it absolutely does work in IE6.

  12. Dan

    Good work both Janko and David. ;-) Works great in IE. However, there are minor issues with the animation in Opera (9.64, stable release). Didn’t have time to check full browser compatibility so I don’t know how FF, Chrome or Safari renders it. Still, great code as always and a big thanks.

  13. Great tool. Sound effects can be added more cool.

  14. I man I use Your nice script in a class that I make for check Skype status …
    Very nice the effect and is exactly what I need for my script. I put the credits for Your part in my class but want to know if there is a problem for You :)
    here is mi class :
    MooSkype class

  15. Hey I got a question for you how would I use this button style to submit a form?

  16. Great tool. Sound effects can be added more cool

  17. Great tool. Sound effects can be added more cool

  18. Great tool. Sound effects can be added more cool.

  19. Didn’t have time to check full browser compatibility so I don’t know how FF, Chrome or Safari renders it. Still, great code as always and a big thanks.

  20. Hey I got a question for you how would I use this button style to submit a form?

  21. great tutorial , thx

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!