bootstrap.cssを使うことで、簡単にきれいなボタンを画像なしで作成できます。

bootstrap.cssのボタンの基本的なスタイル構造

サンプル

<a href="#" class="btn btn-success btn-mini">
<i class="icon-white icon-user"></i> Bootstrap Button-01</a>

a要素、button要素、input要素などに、1つから3つのclassを指定します。"btn"はボタンを角丸やテキスト位置調整のためのもので、必須です。

ボタンの色

default 、primary、 info 、success、 warning 、danger 、inverse の7種類用意されています。これをそれぞれ"btn-"の後に小文字で追加します。上のサンプルでは、"btn-warning"でベースが黄色のボタンということになります。これを省略したり、スペルミスをすると、Default になります。

ボタンのサイズ

mini 、small、 default、 largeの4サイズになります。

アイコン

数多く用意されたアイコンを利用できます。アイコンは、「iタグ」を使い、classのicon-whiteでアイコンの色、icon-userで、形状を指定します。a要素、button要素で利用できます。

実際のサンプル01

Bootstrap Button-01

<a href="#" class="btn btn-success btn-mini"><i class="icon-white icon-user"></i> Bootstrap Button-01</a>

実際のサンプル02

Bootstrap Button-02

<a href="#" class="btn btn-danger btn-small"><i class="icon-white icon-heart"></i> Bootstrap Button-02</a>

実際のサンプル03

Bootstrap Button 03

<button class="btn btn-warning"><i class="icon-white icon-warning-sign"></i> Bootstrap Button 03</button>

実際のサンプル04

Bootstrap Button 04

<button class="btn btn-info btn-large"><i class="icon-white icon-file"></i> Bootstrap Button 04</button>