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

[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!!!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク