cssでimgに影つけてボタンっぽくする

サンプル

http://codepen.io/maruware/pen/YGPKVN

手順

filter: drop-shadow

filter: drop-shadowは透過画像の非透過部分に影をつけられる。

.btn.github{
    -webkit-filter: drop-shadow(0px 7px 0 #ccc);
    filter: drop-shadow(0px 7px 0 #ccc);
}

.btn.qiita{
    -webkit-filter: drop-shadow(0px 7px 0 #459109);
    filter: drop-shadow(0px 7px 0 #459109);
}

のように影の色をそれっぽくして設定。
Adobe Colorで元の色入れてイジると楽。

transition

.btn {
    transition-property: all;
    transition-duration: 0.1s;
    transition-timing-function: ease-in-out;

    position: relative;
    top: 0px;
}

.btn:active {
  top: 7px;
}

.btn.github:active {
  -webkit-filter: drop-shadow(0 0 0 #ccc);
  filter: drop-shadow(0 0 0 #ccc);
}

.btn.qiita:active {
  -webkit-filter: drop-shadow(0 0 0 #459109);
  filter: drop-shadow(0 0 0 #459109);
}

などとしてtransitionでアニメーションする。
positionを影のサイズ分下げて押し込んだようにする。