[JS]スタイリッシュなボタンを画像を使用しないで実装するスクリプト -styledButton

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が必要です。

top of page

©2017 coliss