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.

View Demo

The XHTML

view sourceprint?

1.<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

view sourceprint?

01..skype-button {

02. padding:4px 10px 3px 25px;

03. border:solid 1px #8AB134;

04. position:relative;

05. cursor:pointer;

06. display:inline-block;

07. background-image:url('skype-bkg.png');

08. background-repeat:repeat-x;

09. font-size:11px;

10. height:16px;

11. text-decoration:none;

12. color:#40740D;

13. -moz-border-radius-bottomleft:5px;

14. -moz-border-radius-bottomright:5px;

15. -moz-border-radius-topleft:5px;

16. -moz-border-radius-topright:5px;

17.}

18..skype-button img {

19. position:absolute;

20. top:-4px;

21. left:-12px;

22. border:none;

23.}

24..skype-button:hover {

25. color:#8AB134;

26.}

This too is the exact code provided by Janko.

The MooTools Javascript

view sourceprint?

01.window.addEvent('domready',function() {

02. $$('a.skype-button').each(function(el) {

03. var img = el.getElement('img'), running = false;

04. var fx2 = new Fx.Morph(img, {duration: 100, link: 'chain', onChainComplete:function() { running = false; } });

05. var fx1 = new Fx.Morph(img, {duration: 200, link: 'chain', onComplete:function() {

06. fx2.start({'top':'-7px'}).start({'top':'-4px'}).start({'top':'-6px'}).start({'top':'-4px'});

07. }

08. });

09. el.addEvent('mouseenter',function() {

10. if(!running) {

11. fx1.start({'top':'-10px'}).start({'top':'-4px'});

12. running = true;

13. }

14. });

15. });

16.});

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.

View Demo

Props to Janko for his original article!