CSSで画像に影をつけたり動かしたりする方法

ウェブサイトに画像やボタンを設置してそこにリンクを設定したときに、少しアニメーションをつけるとおしゃれですよね。
ホバーで少し上がったり、クリックで少しさがったり。画像自体には影がなくても、cssで影をつけることも出来ます。
こちらの記事では、コピペで使えるCSSを公開します。

下のボタンにカーソルを合わせると少し上がって、クリックすると少し下がります。

動かしたい画像を<a>タグで括って、そこにクラス（ここではdeco_btnとクラス名をつけています。）を設定します。
HTMLのソースはこんな感じです。

<a href="リンク先のURL" class="deco_btn"><img src="画像のURL" alt="button" width="画像の幅" height="画像の高さ"/></a>

そして、cssはこちら。

.deco_btn img{
transition-duration: 0.3s ;/*動きにかける時間*/
transition-timing-function: ease;/*開始と終わりの動きをなめらかに*/
box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8);/*画像に影をつける*/
}

.deco_btn img:hover{
transform: translateY(-2px);/*カーソルオンで上方向に2pxあがる*/
}

.deco_btn img:active{
transform: translateY(1px);/*クリックで下方向に1pxさがる*/
}

ここでは上下の動きなので、translateY()　を使用していますが、横の動きならtranslateX()を使います。
またtransition-timing-functionプロパティーの設定によって、いろいろ動きに変化が出ます。

やりすぎはユーザビリティーを悪くしますので、さりげなく、使い心地の良さを追求しつつ楽しみたいですね。