前の記事 ≪:2010年1月26日 管理人のブックマーク
次の記事 ≫:カーブが美しいフォント色々

画像を使わずにGoogle風のクールなボタンが作成できるjQueryプラグイン

2010年01月27日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
jQuery imageless buttons a la Google

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



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

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



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

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

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

関連エントリ
スポンサード リンク

By.KJ : 2010年01月27日 09:06 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)