CSSフレームワーク

Twitter Bootstrapをよく使います。
それはそれは、よく使いまくっています。

WEBアプリ系のデザインは、ほぼすべてと言っていいほど使っているのですが、使えば使うほどもっとこんなスタイルもほしいなぁなんて欲がでてきます。

そこで、たまにBootsnippなどで面白いUIがないか探したりしているのですが、Bootsnippなんかで見つけて、実際に自分が作ったサイトで使っている、ボタン周りの追加CSSをご紹介します。

例えば、通常のボタンのスタイルは

ですが、そこに追加で「btn-outline」を追加して

このようにすると、

こんな感じになったり、

このように指定すると

このように表示されたりする、追加用のBootstrap用のアドオンのようなCSSを作りました。

追加したスタイルは、「btn-outline（アウトライン表示）」、「btn-border（太枠線表示）」、「btn-square（角丸解除）」、「btn-circle（丸ボタン）」、「btn-round（左右丸表示）」の5つです。

「btn-sm」や「btn-lg」なんかと組み合わせることも出来ますし、追加CSS同士を組み合わせて表示させることも出来ます。
ちなみにDEMOページもありますので、興味のある方はダウンロードしてお使いください。

CSSダウンロード（zipアーカイブ・1.4KB）

ダウンロードして解凍したCSSをBootstrapのCSSを読み込んだあとで、読み込んでください。

これで、対象のクラスを付与するだけで、スタイルを追加できます。