たったの3ステップでボタン作成！プレデザインCSS「Butns.css」の使い方

通常、 CSS のライブラリや フレームワーク には、グリッド レイアウト や フォーム などの一連のデザインがパッケージングされていますが、ボタンに関してはカスタマイズ性がそれほど高くないのが現状です。

デザイン性の高いボタンを作りたい時に便利なのが「Butns.css」です。

今回は、ボタン作成に特化したプレデザイン CSS 「Butns.css」をご紹介します。
「Butns.css」を使うと、フラットでシンプル、そしてカラフルなボタンを簡単に作成することができます。

Butns.cssとは？

Butns.cssとは、ボタンデザインに特化した CSS ライブラリです。
一般的なライブラリや フレームワーク と違い、Butns.cssは レイアウト 要素などを含んでいない軽量な CSS ファイルになっており、ボタンデザインに特化しているため「プレデザイン CSS 」(Pre-designed CSS )と呼ばれることがあります。

ハイパーリンクのclassに必要なタグをセットするだけで、さまざまな外見のボタンを作成できます。

さまざまな種類のボタンを簡単作成

上の写真にもあるように、Butns.cssを使って、ボタンの中身を塗りつぶしたり、縁だけのボタンを作ったりすることができます。
色の指定も自由にできます。

豊富なオプション

暗めの色や明るめの色にボタンの色を調整したり、影をつけたり丸みをつけたりと、さまざまなオプションが用意されています。
使える色はご覧の通りですが、近々のアップデートで利用できる色が増える予定です。
オプションとなるclassは複数指定することも可能です。

使い方

導入は3ステップのみで完了できます。

1. ダウンロード

http://butns.ga

Butns.cssのホームページで、「Download Now」からZipファイルをダウンロードするか、GitHubからダウンロードします。

2. 読み込み

CSS を任意の場所に配置し、 HTML ファイルの中で CSS ファイルを呼び出します。

<link href="butns.css" rel="stylesheet">

3. コーディング

続いて、ボタンにする部分をコーディングしていきます。

<a href="#" class="button fill-purple">Button</a>

これだけで、次のようなボタンを作成することができます。

そのほか、Butns.cssの ページ では様々なオプションが紹介されています。
デザインしたいスタイルを複数していすることも可能です。

まとめ

ボタンはさまざまな UI コンポーネントの中でも、特に使用頻度が高いパーツのうちの一つです。
それだけに、簡単に何度も再利用可能な CSS があれば、非常に重宝します。
それを可能にしたのが、今回ご紹介したButns.cssです。

これまでにもさまざまな CSS のライブラリがリリースされてきましたが、ボタンに特化したものは少なかったのではないでしょうか。
ぜひご自身のホームページにも、Butns.cssを活用してみてください。