Modern UI（旧：Metro）デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons
Post on:2012年10月24日
sponsors
週末に発売予定のWindows8で採用されているModern UIの大きな特徴であるボタンやフォームを超軽量の外部スタイルシートファイルと簡単なclass指定で実装できるCSS3のライブラリを紹介します。
Modern Buttons
CSS3 Microsoft Modern Buttons -GitHub
※キャプチャはWindows8のModern UI
Modern Buttonsの特徴
Modern Buttonsは、ボタンやフォームをCSS3で美しくスタイルした軽量（5.5KB gzipped）で使いやすいCSS/JavaScriptのライブラリです。
- クロスブラウザ対応
- IE8をはじめ、最新のChrome, Firefox,など全てのモダンブラウザに対応。
- Bootstrap対応
- HTML/CSSのフレームワーク「Bootstrap2.0+」対応で、簡単に組み込めます。
- 制作者用にLESS, SASS
- ウェブ制作者用に、LESS, SASSのファイルも完備。
- LESS, SASSは、dsl-branchから。
- 商用利用、複製、頒布、OK
- ライセンスはCC 3.0で、商用利用、複製、頒布などOKです。
Modern Buttonsのデモ：ボタン
数多くあるボタンのデモから、いくつか紹介します。
左から、a要素、input要素、button要素を使ったシンプルなボタン
ボタンのカラーはclassを変更するだけです。
サイズもclassを変更するだけで、サイズなど他のバリエーションと組み合わせもOK。
角丸やストライプもclassを変更するだけです。
ボタンのグループ化やツールバーのように分けて配置することもできます。
アイコンを配置するとかなりModern UIのようなデザインになります。
jQueryを使って、リスト要素でドロップダウン型のボタンも作成できます。
ドロップダウン型のボタンにもMorder UIのスタイルをあてることができます。
Modern Buttonsのデモ：フォーム
Modern Buttonsではボタンだけでなく、フォームのエレメントも数多く揃っています。
シンプルながら利便性を考慮したテキストエリア・ボックス、チェックボックス・ラジオボタン。
select要素を使ったドロップダウンやリスト。
入力エリアの前後にアイテムを設置することもできます。
フォームのエレメントのサイズも簡単に変更できます。
sponsors
