Créer des boutons à la Skype avec jQuery

Voici un petit script en jQuery permettant de créer un effet bien sympa, inspiré par Skype.

Si vous utilisez skype, vous avez probablement déjà remarqué le bouton qui permet d'ajouter des contacts. Lorsque vous cliquez dessus, l'icône de gauche fait quelques bons.

C'est cet effet qu'a voulu reproduire Janko, mais dans une version Javascript.

Pour mieux comprendre à quoi vous attendre, jetez un coup d'œil sur le bouton en bas de cette démonstration.

Mise en pratique:

Le bouton est décomposé en 2 éléments HTML:

<a class="button" href="#">
    <img src="button.png" alt="" />Send info
</a>

Une icône sous forme d'image et le texte du bouton, tous les deux placés dans un lien.

Avec du CSS, on va donner un style plus classe à notre bouton, pour qu'il ressemble un peu à ceux de skype:

.button {
    padding: 4px 10px 3px 25px;
    border: solid 1px #8AB134;
    position: relative;
    cursor: pointer;
    display: inline-block;
    background-image: url( '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;
}
.button img {
    position: absolute;
    top: -4px;
    left: -12px;
    border: none;
}
.button:hover {
    color: #8AB134;
}  

Et il ne reste plus qu'à animer l'icône du bouton, dès que l'on passe la souris dessus:

$(document).ready(function(){
    $(".button").hover(function(){
        $(".button img")
            // first jump 
            .animate({top:"-10px"}, 200).animate({top:"-4px"}, 200)
            // second jump
            .animate({top:"-7px"}, 100).animate({top:"-4px"}, 100)
            // the last jump
            .animate({top:"-6px"}, 100).animate({top:"-4px"}, 100);
    });
}); 

Grâce à ce code, l'icône du bouton fera trois bonds (de hauteur décroissante) lors d'un hover.

Sympa comme effet non ?

Site officiel