ボタン実装の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しましょう。

最終更新日:2014年11月13日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/sass-buttons-setting/trackback/