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);
});
});
コメント