WebAppers

/ best free open source web resources /

Shopify

How to Create Skype-like Buttons with jQuery

Posted · Category: Buttons, License Free

If you use Skype I am sure that you noticed that animated button for adding more people to a chat. When you mouseover on it, the icon on the left “jumps” for a few times. The animation looks really attractive.

Janko is going to show you how to create the Skype-like Buttons using jQuery and some simple CSS. The code is tested in Firefox, Safari and IE7.

Skype Button

Requirements: jQuery Framework
Demo: http://www.jankoatwarpspeed.com/examples/skype_buttons/
License: License Free

5 Comments
  • http://fedmich.com/life fedmich

    that was fun :)
    I might implement that some time

  • http://www.merlinvicki.in merlinvicki

    Very good idea. not compatible with opera. any ideas?

  • Stephane

    On Firefox 3.0.2 on Windows once the button has been clicked there is this dotted square border showing the focused image.

    Hovering again on the button, the image AND ITS BORDER FRAME do their little dance.

    It’d be nice to make sure there is no such border frame displayed ever on this button.

  • Mario Kostelac

    Apply outline: none; as css property on link.

  • http://fastwaystolosefat.com Kathy Thomas

    Hi,
    Interesting post.

    I am looking for an Amazon “Buy Now” type button.

    Is this:
    a) allowed without infringing on brand/copyright?
    b) available anywhere on the net?

    thanks for great resources!

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons