如何在 Bootstrap 中更改 btn 颜色

Question

有没有办法更改 Bootstrap 中的所有 .btn 属性？我试过下面的那些，但有时它仍然显示默认的蓝色（比如在单击并移除鼠标等之后）。我怎样才能完全改变整个主题？

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Answer 1

如果您想覆盖 Bootstrap 中的任何默认属性，您必须使这些属性变得重要。

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

希望这对你有用。

Answer 2

我猜你忘了 .btn-primary:focus 属性和逗号 .btn-primary

你也可以使用 less 并重新定义 [=25 中的一些颜色=] file

考虑到这一点，您的代码将如下所示：

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

Answer 3

查看需要覆盖哪些属性的最简单方法是查看 Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less。您仍然需要覆盖相当多的属性以摆脱所有 .btn-primary 样式（例如 :focus、disabled、在下拉列表中的使用等）。

更好的方法可能是：

使用 Bootstrap's online customization tool
手动创建您自己的颜色class，例如.btn-whatever
使用 LESS 编译器并使用 .button-variant mixin 创建您自己的颜色 class，例如.btn-whatever

Answer 4

只需在以下位置创建您自己的按钮：

http://blog.koalite.com/bbg/
在您的 boottrap.min.css

干杯

Answer 5

我最近运行遇到了类似的问题，并设法通过添加 classes

来解决它

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

还要注意 [disabled] 和 [disabled]:hover，如果这个 class 用于 input[type=submit]。像这样：

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Answer 6

我认为使用!important不是一个非常明智的选择。它可能会导致许多其他问题，特别是在使网站响应时。所以，我的理解是，最好的方法是使用自定义按钮 CSS class 和 .btn bootstrap class。 .btn 是 bootstrap 按钮的基本样式 class。所以，保留它作为布局，我们可以使用我们的自定义 css class 更改其他样式。我还想在这里提一件事。有些人试图从按钮中删除蓝色轮廓。这不是一个好主意，因为使用键盘时存在可访问性问题。使用 outline-color: 更改它的颜色。

Answer 7

您错过了一种样式“.btn-primary:active:focus”，这导致在 btn 单击期间仍然显示默认 bootstrap 颜色一秒钟。这适用于我的代码：

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Answer 8

2022 更新 Bootstrap 5

Bootstrap 5 具有相同的 button-variant 和 button-outline-variant SASS mixins，可用于在导入 bootstrap 后自定义按钮颜色。 .

/* import the Bootstrap */
@import "bootstrap";

/* ------- customize primary button color -------- */   
$mynewcolor:#77cccc;

.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://codeply.com/p/UNvB5hRsfF

2019 年更新 Bootstrap 4

现在 Bootstrap 4 使用 SASS，您可以使用 button-variant mixins 轻松 更改主按钮颜色：

$mynewcolor:#77cccc;

.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://codeply.com/p/JnV3xDDiaH (SASS 演示)

这个SASS编译成下面的CSS...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.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(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    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: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.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(119, 204, 204, 0.5)
}

https://codeply.com/go/lD3tUE01lo (CSS 演示)

要更改所有类的原色，请参阅：Customizing Bootstrap CSS template and

Answer 9

删除按钮颜色 class，如 "btn-success" 并放置自定义 class，如 "btn-custom"，并为 class 写 css。这对我来说很管用。

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Answer 10

这是我的风格，没有失去悬停。我个人比标准 bootstrap 过渡更喜欢它。

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #8064A2 !important;
}

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

Answer 11

最简单的方法是：

拦截每个按钮状态
添加 !important 以覆盖状态

    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:visited,
    .btn-primary:focus {
      background-color: black !important;
      border-color: black !important;
    }

或更实用UI的方法是让按钮的悬停状态比原来的状态更暗。只需使用下面的 CSS 代码段：

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Answer 12

为像我这样的 SASS/SCSS 新手在上面的@Codeply-er 的回答中添加分步指南。

保存 btnCustom.scss.

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

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

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

下载一个SASS编译器如Koala这样上面的SCSS文件就可以编译成CSS.
克隆 Bootstrap github 存储库，因为编译器在某处需要按钮变体混入。
通过创建 _bootstrap.scss 文件显式导入 bootstrap 函数，如下所示。这将允许编译器访问 Bootstrap 函数和变量。

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

用之前下载的编译器编译btnCustom.scss到css。

Answer 13

我不是这个的 OP 但它对我有帮助：

我想更改主页上 bootstrap 轮播的 next/previous 按钮的颜色。

解法： 从 bootstrap.css 复制选择器名称并将它们移动到您自己的 style.css（使用您自己的偏好..）：

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Answer 14

您可以在配置文件中使用 bootstrap theming 添加自定义颜色，例如 variables.scss 并确保在编译时 bootstrap 之前导入该文件。

$theme-colors: (
    "whatever": #900
);

现在你可以.btn-whatever

Answer 15

这是我对“大纲”按钮的参与：

用您的颜色替换 #8e5b5b，用您的颜色替换 #b3a7a7，但通常更亮。

.btn-outline-custom{
  color: #8e5b5b;
  border-color: #8e5b5b;
}

.btn-outline-custom:focus{
  box-shadow: 0 0 0 0.2rem #b3a7a7;
  -webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
  outline: 0;
}

.btn-outline-custom:hover,
.btn-outline-custom:active{
  color: #fff;
    background-color: #8e5b5b;
    border-color: #8e5b5b;
}

Answer 16

这里有很多复杂和冗长的内容CSS如果你想用一种颜色覆盖整个按钮，包括按钮边框，你只需要这个：

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
        background-color: #D64B8A !important;
        border-color: #D64B8A !important;
    }

如何在 Bootstrap 中更改 btn 颜色

How to change btn color in Bootstrap

css

twitter-bootstrap

twitter-bootstrap-3