CSS3によるボタン

最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン(>等)を加えることをしますが、今回はグラデーション影(box-shadow)を利用しました。

ボタンのサンプル HTML

ボタンのサンプル CSS

↓上記CSSスタイルをあてた状態(ボックスの位置設定を別途入れています。)

マウスカーソルをオンにした時にグラデーションを反転、影の幅を少なくしています。
transitionでカーソルが乗った時(離れた時)のアニメーションを入れています。