Modern UI(旧:Metro)デザインのボタンやフォームを簡単に実装できるライブラリ -CSS3 Microsoft Modern Buttons

週末に発売予定の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のライブラリです。

サイトのキャプチャ

Modern Buttons

クロスブラウザ対応
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要素を使ったドロップダウンやリスト。

デモのキャプチャ

入力エリアの前後にアイテムを設置することもできます。

デモのキャプチャ

フォームのエレメントのサイズも簡単に変更できます。

top of page

©2017 coliss