[CSS]シンプルな美しいボタンを簡単に実装するだけのスタイルシートの超軽量ライブラリ -beautons
Post on:2014年5月6日
sponsors
使い勝手のよいさまざまなスタイルのシンプルなボタンを実装するだけのライブラリというか、スタイル集を紹介します。
スタイルシートは1.4kbで、超軽量！
使い方は非常に簡単で、外部スタイルシートを記述し、各ボタンに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
