Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。
jQuery imageless buttons a la Google
デモページ
サポートしているブラウザも多く、下記の通りです。
- Opera 10 beta
- Opera 9.6x
- Firefox 3
- Firefox 2
- Safari 4
- Safari 3
- Internet Explorer 8 beta
- Internet Explorer 7
- Internet Explorer 6
- Chrome
- Adobe AIR 1.5+
実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。
UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。
styledButtonはjQueryのプラグインのため、実装にはjquery.jsが必要です。
Post on:2010年1月25日
