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-4.png

Recent Features

  • Create a CSS Flipping&nbsp;Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • 9 Mind-Blowing Canvas&nbsp;Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • Digg-Style Dynamic Share Widget Using&nbsp;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...

  • HTML5&nbsp;Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

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!