ボタン実装のSassライブラリ『Buttons』で色の追加やサイズの変更をする

  • 更新日:
  • 公開日:
  • カテゴリー:

ボタンを簡単に実装できるライブラリ『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>
sass-buttons-setting
角丸のピンクボタン

公式ページを見ると「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

書いた人

Symbol Mark

Ryoichi（しつ）

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone