画像を一切使用せずに、CSS(CSS3)のみで形成された、
さまざまなパターンのボタンをまとめているサイト「CSS3 buttons」が
この先活用できそうだったのでメモ書き。

CSS3 buttons / ubuwaits.github.com/css3-buttons


CSS3 buttons / ubuwaits.github.com/css3-buttons
※CSS3非対応ブラウザでは正常に表示されません。

ボタンはそれぞれ、CSS3プロパティの、
角丸「border-radius」シャドウ「box-shadow」グラデーション「gradient」
などを使って構成されています。
マウスオーバー(:hover)時の変化も一つ一つ付いているところが◎。

ページ下部には、WebKitブラウザのみで表示可能となっている
とても凝った形状(デザイン)のボタンも見られます。

画像無しでここまでできるのはおもしろい。

CSS3のボタンジェネレーター的なものもたくさんありますが
こういったサンプルからCSS3でボタンを作る方法を参考にするのもいいかと思います。
(サイト上に紹介されているCSS3ボタンデータは、まとめてダウンロードできるようになっています。)

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

CSS3のみで作られたボタンコレクション「CSS3 buttons」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR