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

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

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

Butns.cssとは？

butns.jpeg

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

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

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

demos.jpeg

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

豊富なオプション

customizable.jpeg

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

使い方

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

1. ダウンロード

butnstop.jpeg
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>

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

button.jpeg

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

まとめ

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

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