jQueryで作るSkypeのようなアニメーションボタン[js]

jankoatwarpspeed.comのエントリーより、jQueryで作るSkypeのようなアニメーションボタンの紹介です。

デモページはこちらから

ソースは以下です。見てもわかるとおり、かなりシンプルです。

HTML

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

CSS

.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;
}

JavaScript

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

コメントする