[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons

Post on:2014年5月6日

当スタイルシートをhead内に記述します。

<head>
  ...
  <link rel=stylesheet href=beautons.min.css>
</head>

ボタンで使用する要素に「.btn」を加え、個別のスタイルを適用します。

<!-- ベーシックなボタン -->
<a href="#" class="btn">Button</a>

<!-- 個別のスタイルを適用したボタン -->
<a href="#" class="btn  btn--small">Button</a>

文中のインラインにもボタンは配置できます。

<!-- インラインに配置したボタン -->
<p>文中にも<a href="#" class="btn  btn--natural">button</a>は配置できます。</p>

beautonsではclassを変更するだけで、さまざまなスタイルのボタンを利用できます。
カスタマイズしたい時もスタイルシートなので、簡単にできると思います。

基本となるBasicは角丸ボタン、ボタンのスタイルはビュレットのような楕円形、フラットに合う矩形もclassを変更するだけで簡単に利用できます。

サイズのバリエーションは、小さいボタンからクリックしやすい大きいボタン、スマフォ用の長いボタンが用意されています。

ボタンのサイズではなく、ボタン内のテキストのサイズを変更することもできます。

機能ごとのボタンもclassで管理されています。
ログインやダウンロード用のポジティブカラー、削除や中止などのネガティブカラー、使用不可のDisabled状態のインアクティブカラー。