O'Reilly

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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

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!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...