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

  • 更新日:
  • 公開日:

buttons-sass-colors

ボタンを簡単に実装できるライブラリ「Buttons」で色の追加やボタンサイズを変更する方法について。(Sassのみです)

色の追加やボタンサイズの変更は変数設定でできます。(Buttonsの設定ファイルは「scss/partials」フォルダの中にある_options.scssです)

例えば色の追加であれば変数$unicorn-btn-actionsに設定します。

上では最後尾にピンク色「(‘pink’ #ea6ca4 #ffffff)」を追加しています。設定の書式は「(‘色名#背景色 #文字の色)」になります。このようにpinkを追加したら、HTMLで以下のようにすると角丸のピンクボタンが実装できます。

sass-buttons-setting
角丸のピンクボタン

公式ページを見ると「button-primary」や「button-action」などとあるので、この名前部分を追加した色の名前にします。

 

通常ボタンの高さや円ボタンのサイズ(直径)、フォントサイズは以下の変数になります。

これらも同じように書き換え、もしくは自分で用意した設定用パーシャルなどで宣言し、デザイン変更をします。設定用パーシャルで変数を宣言する場合はButtonsライブラリより先に@importしましょう。

書いた人

Symbol Mark

Ryoichi(しつ)

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

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

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

うぇぶ: @s_ryone