Twitter Bootstrapをよく使います。
それはそれは、よく使いまくっています。
WEBアプリ系のデザインは、ほぼすべてと言っていいほど使っているのですが、使えば使うほどもっとこんなスタイルもほしいなぁなんて欲がでてきます。
そこで、たまにBootsnippなどで面白いUIがないか探したりしているのですが、Bootsnippなんかで見つけて、実際に自分が作ったサイトで使っている、ボタン周りの追加CSSをご紹介します。
例えば、通常のボタンのスタイルは
1 |
<button type="button" class="btn btn-success">SUCCESS OUTLINE</button> |
ですが、そこに追加で「btn-outline」を追加して
1 |
<button type="button" class="btn btn-success btn-outline">SUCCESS OUTLINE</button> |
このようにすると、
こんな感じになったり、
1 |
<button type="button" class="btn btn-info btn-border">INFO BORDER</button> |
このように指定すると
このように表示されたりする、追加用のBootstrap用のアドオンのようなCSSを作りました。
追加したスタイルは、「btn-outline(アウトライン表示)」、「btn-border(太枠線表示)」、「btn-square(角丸解除)」、「btn-circle(丸ボタン)」、「btn-round(左右丸表示)」の5つです。
「btn-sm」や「btn-lg」なんかと組み合わせることも出来ますし、追加CSS同士を組み合わせて表示させることも出来ます。
ちなみにDEMOページもありますので、興味のある方はダウンロードしてお使いください。
ダウンロードして解凍したCSSをBootstrapのCSSを読み込んだあとで、読み込んでください。
1 2 |
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" media="all"> <link rel="stylesheet" type="text/css" href="bs-button-style.css" media="all"> |
これで、対象のクラスを付与するだけで、スタイルを追加できます。
最近のコメント