Bootstrap 4で非フラットを実装する方法

Question

いつもお世話になっております。

Bootstrap3では以下のように奥行きがあるボタン等（以下参照）が実装できますが、Bootstrap4でも同じような奥行きがあるボタン等（非フラット）を実装できますでしょうか？自分で試したのですが、すべてフラットになってしまいます。

よろしくおねがいします。

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

[退会済みユーザー]

？　bootstrap3 では アウトセット系ボタンはないので独自CSSでなにかしてるはずですが

bootstrap4では btn-outset-* 系でにたことは可能だが・・・・

[x_x]

奥行きがあるボタンと言っているのは画像の「電子メールを更新する」「【メインページ】へ戻る」のボタンのことですか？

Answer 1

グラデーションのことかと思って回答します。
Bootstrap3 でボタンに適用されていたグラデーションはオプションになり、Sass の $enable-gradients を true とすることで使えるようになります。
https://getbootstrap.com/docs/4.2/utilities/colors/#background-gradient

この設定によりアラート等にもグラデーションがかかるようになりますが、とりあえずボタン(.btn-*)に関して言えば、background-color の代わりに次のものが適用されるようになります。

.btn-primary {
  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
}

.btn-primary:hover {
  background: #0069d9 linear-gradient(180deg, #267fde, #0069d9) repeat-x;
}

.btn-secondary {
  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
}

.btn-secondary:hover {
  background: #5a6268 linear-gradient(180deg, #73797f, #5a6268) repeat-x;
}

.btn-success {
  background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
}

.btn-success:hover {
  background: #218838 linear-gradient(180deg, #429a56, #218838) repeat-x;
}

.btn-info {
  background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
}

.btn-info:hover {
  background: #138496 linear-gradient(180deg, #3697a6, #138496) repeat-x;
}

.btn-warning {
  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
}

.btn-warning:hover {
  background: #e0a800 linear-gradient(180deg, #e4b526, #e0a800) repeat-x;
}

.btn-danger {
  background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
}

.btn-danger:hover {
  background: #c82333 linear-gradient(180deg, #d04451, #c82333) repeat-x;
}

.btn-light {
  background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
}

.btn-light:hover {
  background: #e2e6ea linear-gradient(180deg, #e6eaed, #e2e6ea) repeat-x;
}

.btn-dark {
  background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
}

.btn-dark:hover {
  background: #23272b linear-gradient(180deg, #44474b, #23272b) repeat-x;
}

cf. https://cccabinet.jpn.org/bootstrap4/sass-options/enable-gradients

Answer 2

返答が遅くなりまして大変失礼いたしました。

さて、自己解決しました。どうやら、このファイルを読み込む事により、フラットのデザインが奥行きのあるデザインになるようです。

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css

皆様、ありがとうございました。

Comments

[x_x]

それは見てのとおりBootstrap3なんですが……
ほかで問題が出ると思うのでお勧めできません。