ゴーストボタンが最近流行しているので、一つ作ってみました。以下のような効果があります。

その中でも、ボタン上の線とアイコンの回転は、CSS3のtransitionとtransformを完全に用いて実装しています。特にアイコンの回転効果の実装プロセスは以下の通りです。

.link .img{
    display: block;
    width:180px;
    height:180px;
    margin-bottom: 20px;
    -webkit-transition:all 0.5s cubic-bezier(0, .18, 0, .97);　　　　//为了兼容chrome和Safari
    transition:all 0.5s cubic-bezier(0, .18, 0, .97);　　　　　　　　//定义动画属性，包括要变化的属性，时间，以及变化曲线（linear、ease、ease-out或者自定义等）
}
.mis .img{
    background: url(../images/mission.png) no-repeat  center 0;
}
.link .img:hover{
    -webkit-transform: rotate(360deg) scale(1.2);
    -ms-transform: rotate(360deg) scale(1.2);
    transform: rotate(360deg) scale(1.2);

}

ボタンの線の効果は上記の方法と同様ですが、ボタン上のヒントテキストはJavaScriptで実装されています。

主な原理は、JavaScriptでボタン上の対応するtitle属性（表示するテキスト）を取得し、それをツールチップ内に挿入し、現在のボタンの位置を判定することで、ツールチップが表示されるべき適切な位置を設定することです。

$(function(){　　　　　　　　　　
    $(".link .btn").hover(function(){
        var title = $(this).attr("data-title");
        $(".tip em").text(title);
        var left = $(this).position().left;
        var dis = Math.abs(($(".tip").outerWidth()-$(this).outerWidth())/2);
        var now = left -dis;
        console.log("title="+title+"  ","left="+left,"dis=",dis,"now="+now,"this"+$(".tip").outerWidth());
        $(".tip").css({"left":now+"px"}).animate({"top":130,"opacity":1},300);
    },
    function(){
        $(".tip").animate({"top":100,"opacity":0},300);
    }
    )
})
//用了jQuery框架中的hover(function(),function())函数，前一个函数为鼠标放上去的动作，后一个为鼠标离开时的动作。