CSSだけでhover時にdiv要素をふわっと浮き上がらせる

やりたいこと

マウスオーバー時にdivの要素をふわっと浮きあがらせたい。例えば、カードやボタンなどだ。

実装方法

<a href="#" class="fly">テスト</a>

.fly {
    background-color: #3169d1;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    margin: 10px 0 0 0;
}
.fly:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

これだけでふわっとした動きをつけることができる。

参考：http://design.aekana.com/blog/css-mouseover-effect