button要素と、CSSの前方一致、後方一致、部分一致により、一つのクラス名で3000種類以上ものボタンを作ることができます。実用性を無視すれば、これよりはるかに多くの数でも可能です。

CSSのセレクタには便利な前方一致、後方一致、部分一致があります。しかも、この３種類を一つのクラス名で同時に指定することが可能です。これを利用して、CSSによるボタン作成をフレームワーク風にやってみました。

ボタンサイズ（前方一致）

ボタンサイズは、前方一致で6種類作りました。button要素に対してのクラス指定で、クラス名の先頭からの文字列が「サイズ（前方一致）の表」のように一致（赤字部分）すれば、サイズのスタイルが適用されます。

htmlソース

  <button class="ssbtn-a01">ボタンa01</button>
  <button class="sbtn-a02">ボタンa02</button>
  //中略
  <button class="llbtn-a05">ボタンa05</button>
  <button class="lllbtn-a06">ボタンa06</button>

 

ボタンの色（後方一致）

ボタンの色は、前方一致で18種類（ここに表示されている分で）です。クラス名の後ろからの文字列が「色（後方一致）の表」のように一致（赤字部分）すれば、色のスタイルが適用されます。また、この後方一致セレクタが無指定、またはスペルミス等で無効になったときは、デフォルトの#efefefになります。

htmlソース

  <button class="btn-redp">ボタンb01</button>
  <button class="btn-red">ボタンb02</button>
  //中略
  <button class="btn-gray">ボタンb17</button>
  <button class="btn-grayd">ボタンb18</button>

 

ボタンの角丸（border-radius）

ボタンの角丸は、部分一致で6種類（実際は、1px刻みで0から6pxまで7種類、2px刻みで8pxから16pxまで5種類、それぞれシャドー付きあるので計24種類）です。クラス名の前からと後ろからの文字列は、前方一致と後方一致が利用するので、それ以外の部分（名称を重複させればどの場所でも可能ですが、ややこしくなるのでやめています）で、「角丸（部分一致）の表」のように一致（赤字部分）すれば、角丸のスタイルが適用されます。この部分一致セレクタが無指定、またはスペルミス等で無効になったときは、デフォルトの5pxになります。また、表では省略していますが、各文字列の後ろに「s」を追加すれば、シャドー付きになります。

htmlソース

  <button class="lbtn-rad0-gray">ボタンc01</button>
  <button class="lbtn-gray">ボタンc02</button>
  //中略
  <button class="lbtn-rad12-gray">ボタンc05</button>
  <button class="lbtn-rad16-gray">ボタンc06</button>

 

作成サンプル

サイズを「llbtn」、色を「blue」、角丸を「rad6」で作ると、クラス名は、「llbtn--rad6--blue」のようなもの（文字列の判別に支障がなければ間の文字列はなんでもかまいません）になります。これで作成したのが次のボタンです。

作成サンプルボタン

htmlソース

  <button class="llbtn--rad6--blue">作成サンプルボタン</button>

作成サンプル（シャドー付き）

作成サンプルボタン

htmlソース

  <button class="llbtn---rad6s---blue">作成サンプルボタン</button>