ボタンを簡単に実装できるライブラリ『Buttons』で色の追加やボタンサイズを変更する方法について。（Sassのみです）『Buttons』で色の追加やサイズ変更をする色の追加やボタンサイズの変更は変数設定でできます。（Buttonsの設定ファイルは「scss/partials」フォルダの中にある_options.scssです）例えば色の追加であれば変数$unicorn-btn-actionsに設定します。//デフォルト$unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF) ('caution' #E54028 #FFF) ('royal' #87318C #FFF) !default;//ピンク色を追加$unicorn-btn-actions: ('primary' #00A1CB #FFF) ('secondary' #FFF #FFF) ('action' #7db500 #FFF) ('highlight' #F18D05 #FFF) ('caution' #E54028 #FFF) ('royal' #87318C #FFF) ('pink' #ea6ca4 #ffffff);上では最後尾にピンク色「(‘pink’ #ea6ca4 #ffffff)」を追加しています。設定の書式は「(‘色名‘ #背景色 #文字の色)」になります。このようにpinkを追加したら、HTMLで以下のようにすると角丸のピンクボタンが実装できます。<a href="#" class="button button-rounded button-flat-pink">press me</a>角丸のピンクボタン公式ページを見ると「button-primary」や「button-action」などとあるので、この名前部分を追加した色の名前にします。通常ボタンの高さや円ボタンのサイズ（直径）、フォントサイズは以下の変数になります。$unicorn-btn-height: 32px !default; //ボタンの高さ$unicorn-btn-circle-size: 120px !default; //円ボタンのサイズ（円ボタンのみ有効）$unicorn-btn-font-size: 16px !default; //フォントサイズこれらも同じように書き換え、もしくは自分で用意した設定用パーシャルなどで宣言し、デザイン変更をします。設定用パーシャルで変数を宣言する場合はButtonsライブラリより先に@importしましょう。alexwolfe/Buttons: A CSS button library built using Sass and Compass
