ボタン／リンク

ボタン or テキストリンク、どちらにするか？

• 何かの状態を変化させるような、操作の場合はボタン
• 単なるの移動の場合はテキストリンク
• 単なる移動でも重要な場合、強調したい場合にのみボタン
• ボタンを多数並べると操作性が落ちる。重要度に応じて、重要なものはボタン、そうでもないものはテキストリンクとかにして差別化するのもよい

ボタンの色を役割によって使い分ける

色は、全てのケースで適用できるわけでもない。そんなに杓子定規にもできないが、意識しておくとよさそう。

• .btn or .btn-default（白）→ 通常操作 / そこまで重要でもないもの
• .btn-primary（青）→ そのページにおけるメインの動作
• .btn-warning（オレンジ / 黃） → 新規作成 等 少し特殊な動作
• .btn-danger（赤）→ 削除とか危険なやつ（けど目立ちすぎると嫌なんであんまり使わなかったりする）

Sass の色変数と、bootstrap のclassの関係

• .btn-primary は、 $main-color と同色か もしくは同系色 ※
• .btn-warning は、 $accent-color

一般的に、下記のような関係になることが多い。

※ ボタンとして無理のある色（ちょっと明るすぎたり暗すぎたりする場合）は同系色で少し見やすい感じに調整したりすることはある。（$main-color が紺色だったら、primary は少し明るくした青色にしたりする）

参考

https://speakerdeck.com/ken_c_lo/zuruidezaintekunituku2013-plus-semihuratuto-version