【CSS】おしゃれなデザインのボタンをBttn.cssで実現する【ライブラリ】

7637 ワード
ライブラリ CSS Design フロントエンド CSS テキストリンク

おしゃれでカッコイイボタンを作りたいんだけど、CSSはあんまり・・・ということで、フリーのライブラリBttn.cssを使って、簡単・お手軽に作ってみようと思います。
公式サイトBttn.css

１．ダウンロード

サイトトップにいきなり「Download」ボタンがあります。
これをポチって、CSSファイルをダウンロードします。これだけでOK

「Github Repo」ボタンはGithubへのリンクです。今回は使いません。

２．インストール

ダウンロードしたファイルを、シンプルにlinkタグで定義するだけ。

<link rel="stylesheet" href="./bttn.min.css">

３．使ってみる

13種類のスタイルと６種類の色が定義されてます。
サイズも４種類あるので、その組み合わせは312通り

３－１．色を選ぶ

冒頭の「Download」ボタンの下に、６色の丸があります。
一番右は、すごく見にくいですが、白色です。

この６色が使える色で、ポチポチすると色が切り替わってシミュレーションできます。
そして、それぞれの色の名前は以下の通りです

色 class名
青 bttn-primary
黄 bttn-warning
赤 bttn-danger
緑 bttn-success
紫 bttn-royal
白 bttn-default

３－２．サイズを選ぶ

用意されているサイズは次の４つ

サイズ class名
極小 bttn-xs
小 bttn-sm
中 bttn-md
大 bttn-lg

横に並べて比較してみると、こんな感じ。
※左から順に、極小 / 小 / 中 / 大

極小サイズはちょっと押しにくそうです
スマホだと最低でも中サイズくらいでしょうか。

３－３．形を選ぶ

13種類用意されてる中で、今回はSimpleを使ってみます。

なんてことはないです。今まで選んだ色とサイズ、形をclassに指定するだけです。

<button class="bttn-simple bttn-md bttn-primary">bttn.css</button>

あっという間に、青色＆中サイズ＆Simpleスタイルのボタンが出来ました！

４．こんなにいらない

13種類も形があるのは、選択肢が豊富でありがたいのですが、実際に13種類全部使うかというと、そうでもない・・・。
特定の１つか２つくらいだけです。

そんな時は、必要なスタイルだけ入ったCSSをダウンロードすればよいのです
各スタイルをマウスオーバーすると、クラウドマークが浮き上がってきます。

このクラウドマークをクリックすると、（上記の図の場合）SimpleスタイルのみのCSSがダウンロードできます。
最初にダウンロードした「全部入り」が33KBなのに対して、スタイル１つだけだと5KB前後と、かなり軽量化されます。

４－１．小さいCSSを使ってみた

先ほどSimpleを使ったので、今度はFloatをDLしてみました。

<html lang="ja">
<head>
  <link rel="stylesheet" href="./float.css">  /* DLしたスタイル指定のCSS */
</head>
<body>
  <button class="bttn-float bttn-md bttn-primary">bttn.css</button>
</body>
</html>

できたー
読み込むCSSを変えるだけなので、使い方は同じです。

まとめ

こういうライブラリは「全部入り」なことが多い気がしてて、スタイルごとにDL出来るのはあんまり見たことないです。
あと、シンプルなものからちょっと凝ったものまで、形のバリエーションが豊富

ぜひ使ってみてくださいー。