如何更改Bootstrap 4版本按钮的颜色

Question

我可以通过在bootstrap v4中更改theme-color来更改主要按钮的颜色。但它也会影响所有其他组件。 如何在不影响主题颜色的情况下设置主要按钮的颜色？ 我不想设置brand-primary来实现这一点。还有其他替代方案吗？

- Janier

Answer 1

Bootstrap 4.1+的2019更新

现在Bootstrap 4使用SASS，您可以使用button-variant mixins轻松地仅更改按钮颜色。由于您只想更改主要按钮颜色，而不是整个主题颜色，因此需要在SASS中使用button-variant mixins。您可以设置任何$mynewcolor和/或lighten()和darken()百分比。

$mynewcolor:teal;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://www.codeply.com/go/f3uTwmsCVZ（SASS演示）

这个SASS编译成以下CSS...

.btn-primary{color:#fff;background-color:teal;border-color:#005a5a}

.btn-primary:hover{color:#fff;background-color:#004d4d;border-color:#009a9a}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,.btn-primary:disabled{color:#fff;background-color:teal;border-color:#005a5a}
.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#00b3b3;border-color:#000}
.btn-primary:not(:disabled):not(.disabled):active:focus,.btn-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-primary{color:teal;background-color:transparent;background-image:none;border-color:teal}.btn-outline-primary:hover{color:#222;background-color:#009a9a;border-color:teal}
.btn-outline-primary:focus,.btn-outline-primary.focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
.btn-outline-primary.disabled,.btn-outline-primary:disabled{color:teal;background-color:transparent}
.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{color:#fff;background-color:#009a9a;border-color:teal}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}

https://www.codeply.com/go/l9UGO7J6V1（CSS演示）

---

要更改所有上下文类（bg-primary、alert-primary等）的主要颜色，请参见：自定义Bootstrap CSS模板和如何更改Bootstrap主要颜色？ 还请参阅：
https://dev59.com/jF4c5IYBdhLWcg3wJnb8#50973207
如何为Bootstrap设置主题

- Zim

---

这应该是被接受的答案，它涵盖了所有按钮状态。 - Andres SK

需要注意的是，字体颜色和背景颜色不能分开设置，这很令人失望。 - nicodemus13

@nicodemus13，你的意思是你不能使用button-variant mixin吗？ - Carol Skelly

是的，抱歉，我表达不够清楚。字体颜色是根据背景颜色计算的。 - nicodemus13

这个参数意味着“按钮的变体”，包括背景、边框颜色、鼠标悬停时的背景颜色和点击时的背景颜色等。 - Rusty

Answer 2

你可以通过在sass文件中更改变量来添加自定义颜色或重新定义颜色（Bootstrap 4）。

$theme-colors: (
   primary: red,
);
@import "~bootstrap/scss/bootstrap";

如果您为颜色使用相同的键，则会重新定义Bootstrap。否则，使用新键将创建新类。

此示例将主要颜色从蓝色更改为红色。

- vml

---

对于 Laravel 5.7，在 _variables.scss 中更改主题颜色。 - shalini

Answer 3

尝试这个方法

为按钮添加一个class，这里使用custom-btn，并在我们的样式表中编写相应的CSS。

.btn-primary.custom-btn {
 background-color: #000;
 border-color: #000;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
 <button type="button" class="btn btn-primary custom-btn">Custom</button>
  <button type="button" class="btn btn-primary">Default</button>
</div>

- Athul Nath

---

请在你的回答中使用Bootstrap 4 稳定 版本。Alpha版本已经很老了。 - Klooven

这并不包括悬停和选中状态。 - Andres SK

Answer 4

根据Bootstrap 文档,

Bootstrap的许多组件都是使用基础修饰器类的方法构建的。这意味着大部分样式包含在基础类中（例如，.btn），而样式变化仅限于修饰器类（例如，.btn-danger）。这些修饰器类是从$theme-colors映射构建的，以制作自定义数量和名称的修饰器类。

因此，如果更改主题颜色，则会影响所有内容。

如果您希望在其他地方使用该颜色，可能应将颜色添加到$theme-colors变量中。

- Dhaval

Answer 5

我曾遇到类似的问题：我想让按钮与其容器颜色相匹配。

所以我创建了一个btn类，在页面加载时会自动适应其父元素的颜色。我对结果感到非常满意（事实上，我甚至正在创建一个小插件）。 JSfiddle 这里

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

$(function() {

  const hexDigits = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];

  function hex(x) {
    return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  }
  function hexify(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  }
  function darken(rgb) {
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    return "rgb(" + parseInt(0.9 * rgb[1]) + ',' + parseInt(0.88 * rgb[2]) + ',' + parseInt(0.87 * rgb[3]) + ')';
  }

  function getParentBackground($elem) {
    var color = $elem.css("background-color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentBackground($elem.parent()));
  }

  function getParentColor($elem) {
    var color = $elem.css("color");
    if (color && color !== 'rgba(0, 0, 0, 0)')
      return color;
    return ($elem.is('body') ? false : getParentColor($elem.parent()));
  }

  $('.btn-negative, .btn-outline-negative').each(function() {
    var bgColor = hexify(getParentBackground($(this).parent()));
    var color = hexify(getParentColor($(this).parent()));
    var rgb = getParentColor($(this).parent());
    this.style.setProperty('--btn-negative-color0', bgColor);
    this.style.setProperty('--btn-negative-color1', color);
    this.style.setProperty('--btn-negative-shadow-color', color + "88");
    this.style.setProperty('--btn-negative-color2', hexify(darken(rgb)));
    this.style.setProperty('--btn-negative-color3', hexify(darken(darken(rgb))));
  });

});

/*
** Author: Jean-Marc Zimmer
** Licence: MIT
*/

.btn-negative::before,
.btn-outline-negative::before {
  --btn-negative-color0: #fff;
  --btn-negative-color1: #000;
  --btn-negative-color2: #000;
  --btn-negative-color3: #000;
  --btn-negative-shadow-color: #0008;
}

.btn-outline-negative {
    background-color: var(--btn-negative-color0);
    border: solid 1px var(--btn-negative-color1);
    color: var(--btn-negative-color1);
}

.btn-negative,
.btn-outline-negative.active,
.btn-outline-negative:hover:not(.disabled):not([disabled]),
.btn-outline-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color1);
    color: var(--btn-negative-color0);
}

.btn-negative.active,
.btn-negative:hover:not(.disabled):not([disabled]),
.btn-negative:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color2);
    color: var(--btn-negative-color1);
}

.btn-negative.active:hover,
.btn-negative:hover:active:not(.disabled):not([disabled]) {
    background-color: var(--btn-negative-color3);
    color: var(--btn-negative-color1);
}

.btn-negative:focus,
.btn-outline-negative:focus {
    box-shadow: 0 0 0 .2rem var(--btn-negative-shadow-color);
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" type="text/javascript"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="container">
    <div class="alert alert-success">
        <p>Some text...</p>
        <button class="btn btn-success">btn-success</button>
        <button class="btn btn-negative">btn-negative</button>
        <button class="btn btn-outline-success">btn-outline-success</button>
        <button class="btn btn-outline-negative">btn-outline-negative</button>
    </div>
</div>

由于CSS在代码片段中的调用顺序不正确，样式无法正确应用。
欢迎提出任何想法以使其更好！

- Jean-Marc Zimmer

Answer 6

你需要创建一个自定义的CSS样式表，覆盖按钮样式或者添加一个新类并覆盖一些属性。

<button class="btn-primary">Button</button>

.btn-primary{
    background-color:black;
}

<button class="btn-primary custom-btn-class">Button</button>

.custom-btn-class{
     background-color:black;
}

- Mauro Barrionuevo

---

我正在寻找Bootstrap 4的解决方案。 - Janier

@Jocket 那这不是一个 BS 4 的解决方案吗？ - connexo

Answer 7

<a  class="btn btn-secondary" href="#">Find out more</a>



.featured  .btn-secondary {
     font-weight: bold;
     background-color: blue;
}

只需在 CSS 中进行编辑，对我很有效

- Justas