CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

Tips

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。
カラーやサイズ指定をはじめ、ライブラリよっては20種類以上のデザインが用意されているものもあります。
そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。

Buttons

Buttons

※指定時の共通接頭辞は「button」

カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。
基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQueryとこのライブラリ用のスクリプトを、アイコンを使うならFont AwesomeのCSSをさらに読む必要があるので、使用する場合はこれらのファイルも読み込むよう設定します。
デモサイトではダウンロードはCSSのみになっていますが、GitHubにはSCSSファイルがありタイプ毎にファイルも分割されているので、それぞれどのような記述を指定しているのかなどをより分かりやすく確認できます。

Bttn.css

Bttn.css

※指定時の共通接頭辞は「bttn」

カラーは6色、サイズは4サイズ分用意されており、見栄えはそれぞれホバーエフェクトも異なる13タイプ用意されているボタンライブラリです。
デモサイトではダウンロードできるのは圧縮されたCSSのみですが、GitHubでは非圧縮のものやコンパイル前のファイル(Stylus)を確認できるので、細かく中身を見たい方はそちらで確認できます。
また、このライブラリは個別で使用することもできるようになっており、使いたい見栄えが1種類だけとかであれば、デモでボタンが表示されている各カードの右上からそのボタンの見栄えを実装するためだけのCSSをダウンロードできるようになっています。
さらに、各カードにホバーすると右下に「Copy code」と表示され、それをクリックすればそのボタンを実装するためのclassが付与されたHTMLがコピーされるようにもなっています。

Buttons

Buttons

ここで紹介しているものの中では一番多い全26タイプのデザインが用意されているボタンライブラリで、カラーは8色、サイズは4サイズ分用意されています。
また、すべてではないですがホバー時とクリック時の見栄えについてもカバーされています。
使用する際は必要なCSS(main.css)を読み、それぞれ必要なclassを適用したい要素に付与していけばいいのですが、用意されているものにはデモで使用するために記述されたボタン周りには不要なスタイルも記述されているので、SCSSを少し変更してボタン以外の余計なスタイルを消した状態でコンパイルして利用するのが良さそうです。
また、GitHubで「Live demo.」という記載はありますが現在デモサイトは閲覧できない状態なので、実際の表示や動きを見たい場合はGitHubからダウンロードしたファイルで確認可能です。

Press.css

Press.css

※指定時の共通接頭辞は「press」

今までのものに比べると全体的にシンプルな見栄えのボタンを実装できるボタンライブラリです。
角丸指定の有無や強さを選ぶのが4タイプ、サイズは4サイズ分用意されており、シャドウを付けたりゴーストボタンにするデザイン指定が3タイプ用意されています。
また、カラーは全20色用意されており、デモサイトで画面左に並べられているカラーを選択すればデモで表示されているボタンカラーが変更されるので、それぞれのカラー適用時の見栄えを確認するのに便利です。
ちなみに、任意でカラーを追加・削除したいときなどは、GitHubにあるSCSS(_colors.scss)を利用すると容易です。

Pushy Buttons

Pushy Buttons

※指定時の共通接頭辞は「btn」

最後は立体的なボタンを実装できるボタンライブラリです。
カラーは3色、サイズは4サイズ分と用意されているものは少なめですが、クリック時にボタンが押されるような見栄えも実装できます。
カラーを追加したい場合はGitHubにあるSCSSに他のものと同様にbackground-colorのみ適用されるようにしておけば、立体的に見せるために指定するbox-shadowなどをいじらなくてもそれっぽい見栄えになってくれます。

Close the search window,
please press close button or esc key.