[CSS3]最近海外のサイトで流行りの2.5Dボタンを作ってみたよ！

やっぱり海外のサイトってかっこいいよね！
海外サイトのテンプレートとかかっこいいよね！
ダウンロードしてきて日本語流し込むとダサイトに早変わりだよね！

そんな海外サイトでよく見かける2.5Dボタンを作ってみましょうー。oh yeah!

See the Pen pJLYNN by mitsuki sagayama (@sagayama) on CodePen.

CSSが結構ダラダラと長いですが「a」を見た目ボタンとして形成する部分がほとんどです。
そしてhover時に影を5pxぼかしなしで下に作ってボタン自体を上に5pxずらします。
active時に影をなしにして先ほど上に5pxずらしたのを戻します。
以上で2.5Dボタンのできあがり。aha?

まとめ

海外サイトで流行ってるかしらんけど作ってみたよ！

ていうか、こういうのが普通に使えるように早くなればいいですねー。IE+9です。Oh my god!!!