jQuery imageless buttons a la Google

画像を使わずにGoogle風のクールなボタンが作成できるjQueryプラグイン。
次のようなボタンやドロップダウン風のボタンが画像を使わずに実装できるプラグインです。



画像を使っていないのですが、クリックするとちゃんと色が反転して押した感覚がでるようになっています。

原理的には複数の span を使って立体感を再現しているようです (Firebugを使って覗いてみたところ)



現在出ているほとんどのブラウザに対応しています。IE6にも対応してくれているようです。

ドロップダウンも実装できるところから、ページのナビゲーションメニューに組み込んでみてもよさそうです。

jQueryプラグインですので、$(element).styledButton( オプション ); のようにして簡単に初期化することが出来ます。

関連エントリ

• CSSでボタンを綺麗にスタイルするサンプル集
• CSSでクールなボタンを作るまとめ
• CSSによるボタンスタイリング例いろいろ