Interactive Designer at Refunk by day and a CSS3 explorer by night.

BonBon Buttons - Sweet CSS3 buttonsに、CSS3とHTML5の機能を使って制作されたボタンサンプルが掲載されている。BonBon Buttonsと呼ばれる成果物で、大きなサイズのボタンを簡単につくることを目指して試験的に制作されたもの。BonBonという名前はフランス語でキャンディーを意味する単語からきているという。主にSafariなどのWebKit系ブラウザを対象としている。使用方法は簡単。次のようにclassの部分に用意されたクラスを指定するだけでいい。

<a href="" class="ここにクラスを指定">Label</a>

用意されている主なクラスは次のとおり。

  • 色指定: orange、pink、blue、green、transparent
  • フォント: serif
  • 効果: glossy、glass
  • サイズ: xs、xl
  • 形状: round、oval、brackets、skew、back、knife、shield、drop、morph

クラスは組み合わせることが可能で、それぞれの組み合わせでさまざまなボタンを表現できるようになっている。BonBon Buttonsの説明によれば、role="button" tabindex="1"といった指定の追加でボタンが押されたままの状態にしたり、data-icon=""の指定でユニコードシンボルの指定やPicosフォントの指定が可能。

BonBon Buttonsを使ったサンプルを次に掲載しておく。BonBon Buttonsの成果物をダウンロードし、展開したファイルのうちbuttons.cssファイルが同じフォルダにあることを想定して作成してある。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>BonBon Buttons demo</title>
  <link rel="stylesheet" type="text/css" href="buttons.css"/>
</head>
<body>
  <a href="#" class="button">MJ</a>
  <a href="#" class="button serif">MJ</a>
  <a href="#" class="button orange">MJ</a>
  <a href="#" class="button pink">MJ</a>
  <a href="#" class="button blue">MJ</a>
  <a href="#" class="button green">MJ</a>
  <a href="#" class="button transparent">MJ</a>
  <a href="#" class="button glossy">MJ</a>
  <a href="#" class="button glass">MJ</a>
  <a href="#" class="button xs">MJ</a>
  <a href="#" class="button xl">MJ</a>
  <a href="#" class="button blue round">MJ</a>
  <a href="#" class="button blue oval">MJ</a>
  <a href="#" class="button blue brackets">MJ</a>
  <a href="#" class="button blue skew">MJ</a>
  <a href="#" class="button blue back">MJ</a>
  <a href="#" class="button blue knife">MJ</a>
  <a href="#" class="button blue shield">MJ</a>
  <a href="#" class="button blue drop">MJ</a>
  <a href="#" class="button blue morph">MJ</a>
  <a href="#" class="button" data-icon="✓">MJ</a>
  <a href="#" class="button green round glossy">マイコミジャーナル</a>
  <a href="#" class="button orange oval glass">エンタープライズチャンネル</a>
  <a href="#" class="button pink back glossy">経営チャンネル</a>
  <a href="#" class="button knife glass">ネットチャンネル</a>
  <button disabled class="button green glossy">無効ボタン</button>
</body>
</html>

BonBon Buttonsデモ閲覧例 Safari 5.0.2 / Mac OS X Snow Leopard

BonBon Buttonsデモ閲覧例 Chrome 7開発版

BonBon Buttonsデモ閲覧例 Firefox 4 beta 5

BonBon Buttonsデモ閲覧例 Opera 10.70開発版 (ボタンとして機能しているとは言いがたい動き)

BonBon Buttonsはあくまでも実験的な目的で制作されたもので、本番環境へ適用するといったことは避けたほうがいいと説明されている。それは開発に使った環境がMac OS Xのみで、特にWindowsにおける互換性検証を実施していないためだと説明がある。たしかに、複数のブラウザで閲覧してみると、意図した通りに動作するブラウザとそうでないブラウザがでてくる。

そのまま本番環境には使えないが、CSS3およびHTML5の機能を使ってどうやってボタンを実現しているのかのサンプルとして参考になる。