LoginSignup
22

More than 5 years have passed since last update.

ボタン専用CSSフレームワークの"Buttons"がいい感じ

Posted at

やりたかったこと

以前、Bootstrap以外のCSSフレームワークを探してみたで、CSSフレームワークを取り上げました。
ただ、もうサイトが出来上がっている場合は、全体にフレームワークを使う必要はありません。どちらかというと、一部のパーツだけに適用したい場合が多いと思います。

例えば、ボタンとか。

そんな時に役立つのが、ボタン制作のための"Buttons"です。

Buttons とは

Buttons
http://alexwolfe.github.io/Buttons/

こんなカラフルなボタンが、簡単に作れます。

スクリーンショット 2014-07-25 20.47.11.png

これは一例で、他にも3Dボタンや、ドロップダウン、アイコン付きボタンなど、計8ジャンルのボタンが使えます。
この真ん丸のボタンに一目惚れしました。

使い方

ダウンロード

Buttonsからダウンロードします。
ファイル構成は、css, js, saas。

css, js の読み込み

index.html
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/buttons.css">

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/buttons.js"></script>

class 指定をする

index.html
<a href="#" class="button button-circle button-flat-primary">press me</a>

これで、上の画像にある、真ん丸のボタンを作れます!

詳しくは公式ドキュメントをご覧下さい。

他には?

など、いろいろあるみたいですが、Buttons ほどバリエーションがあり、ドキュメントが見やすいものはなかなか見つかりませんでした。

中には、こんな変わり種も。

パーツに使える、おすすめのフレームワークなどがあれば、ぜひ教えてください。

参考

ボタン作りの手間を削減!CSSボタンデザインジェネレーターまとめ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22