CSS Basics: How to Design & Code a Stylish Button

CSSスプライトでカッコイイボタンを作るチュートリアル。
CSS3は使っていませんが、３つの画像を１枚にして、hover時、active時に変化するボタン作成の例です。
CSS3でいきたいところですが、CSS3非対応ブラウザにして、かつ、デザインもオーサリングツールで凝ったものにしたいというケースにおいて参考に出来ます。


デモページ

マークアップ自体は次のように非常にシンプルに出来ます。

<a href="#" class="btn">Push the button</a>

どうしてもクロスブラウザで動いてJSなしにCSSで行きたいって場合のシンプルでベストな方法ではないでしょうか。

関連エントリ

• ブラウザごとのCSS3プレフィクスを自動で付与できるWEBサイトツール「prefixMyCSS」
• IE9にも対応したCSS3リファレンスサイト「css3files」
• 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル