Treehouse

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!

ydkjs-1.png

Recent Features

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • Chris Coyier&#8217;s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Incredible Demos

  • Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • Google Font API

    Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font...

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

  22. […] Skype-style buttons How to create a Skype-style button. […]

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