Skype-Style Buttons Using MooTools
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!
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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)
@nunzio fiore: Separating the different speeds.
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
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
No demo ?
Shit, the demo wasn’t coming through. It’s there now.
Thanks for the compliments, David! It’s nice to see it working with MooTools as well (or is it jTools now?)
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?
o yes, I wanted to ask about browser support as well? Does it work in IE6?
@Adriaan: I tried to prevent that actually. I think if you remove the “running” code, it will do what you’re asking.
@Adriaan: Yes, it absolutely does work in IE6.
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.
Great tool. Sound effects can be added more cool.
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
Hey I got a question for you how would I use this button style to submit a form?
Great tool. Sound effects can be added more cool
great , i added an entrance in my web site
thanks
Great tool. Sound effects can be added more cool
Great tool. Sound effects can be added more cool.
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.
Hey I got a question for you how would I use this button style to submit a form?
great tutorial , thx