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!

Cloudinary

Recent Features

  • By
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    Parallax Sound Waves Animating on Scroll

    Scrolling animations are fun. They are fun to create and fun to use. If you are tired of bootstrapping you might find playing with scrolling animations as a nice juicy refreshment in your dry front-end development career. Let's have a look how to create animating...

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!