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

使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。

スタイルシートは1.4kbで、超軽量!

サイトのキャプチャ

beautons
beautons -GitHub

使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンにclassを加えるだけです。

Step 1: 外部ファイル

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

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

Step 2: HTML

ボタンで使用する要素に「.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状態のインアクティブカラー。

sponsors

top of page

©2018 coliss