ボタン専用CSSフレームワークの"Buttons"がいい感じ
やりたかったこと
以前、Bootstrap以外のCSSフレームワークを探してみたで、CSSフレームワークを取り上げました。
ただ、もうサイトが出来上がっている場合は、全体にフレームワークを使う必要はありません。どちらかというと、一部のパーツだけに適用したい場合が多いと思います。
例えば、ボタンとか。
そんな時に役立つのが、ボタン制作のための"Buttons"です。
Buttons とは
Buttons
http://alexwolfe.github.io/Buttons/
こんなカラフルなボタンが、簡単に作れます。
これは一例で、他にも3Dボタンや、ドロップダウン、アイコン付きボタンなど、計8ジャンルのボタンが使えます。
この真ん丸のボタンに一目惚れしました。
使い方
ダウンロード
Buttonsからダウンロードします。
ファイル構成は、css, js, saas。
css, js の読み込み
<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 指定をする
<a href="#" class="button button-circle button-flat-primary">press me</a>
これで、上の画像にある、真ん丸のボタンを作れます！
詳しくは公式ドキュメントをご覧下さい。
他には?
など、いろいろあるみたいですが、Buttons ほどバリエーションがあり、ドキュメントが見やすいものはなかなか見つかりませんでした。
中には、こんな変わり種も。
- CSS3 GitHub Buttons Github に使われているボタンを再現出来る
パーツに使える、おすすめのフレームワークなどがあれば、ぜひ教えてください。
参考
Author And Source
この問題について(ボタン専用CSSフレームワークの"Buttons"がいい感じ), 我々は、より多くの情報をここで見つけました https://qiita.com/seimatz_dev/items/c894519211b83d4c824b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .