如何在 Bootstrap 中更改 btn 颜色答案

【问题标题】：How to change btn color in Bootstrap如何在 Bootstrap 中更改 btn 颜色
【发布时间】：2015-03-31 10:16:12
【问题描述】：

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

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

【问题讨论】：

您可以简单地创建 override_default.css 并将其包含在引导库 css 的下一行，然后您可以随意覆盖任何内容。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

如果您想覆盖 Bootstrap 中的任何默认属性，您必须将这些属性设为重要。

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

我希望这对你有用。

【讨论】：

!important 是关键！
这不是修改 Bootstrap 的好方法，在构建自己的自定义 Bootstrap CSS 时，应通过 Less 或 Sass 变量进行更改。
如果您只是在链接到自定义样式表之前链接到引导程序，那么您的自定义样式表将优先。

【解决方案2】：

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

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

.btn-outline-uploader{
  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;
}

【讨论】：

【解决方案3】：

最简单的方法是：

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

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

OR更实用的UI方式是让按钮的悬停状态比原来的状态更暗。只需使用下面的 CSS sn-p：

.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;
}

【讨论】：

【解决方案4】：

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/go/2bHYxYSC0n（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 和 How to change the bootstrap primary color?

【讨论】：

这篇文章帮助我创建了一个紫色按钮，如 Bootstrap 主页所示。
对于像我这样的迟钝的人，请注意，您需要在导入引导程序本身之后进行覆盖，因为该导入包含您将要包含的内容并重新定义。跨度>

【解决方案5】：

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

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

现在你可以.btn-whatever

【讨论】：

【解决方案6】：

我不是这个 answer 的 OP，但它帮助了我：

我想更改主页上引导轮播的下一个/上一个按钮的颜色。

解决方案： 从 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;
}

【讨论】：

【解决方案7】：

为像我这样的 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);
}

下载 Koala 等 SASS 编译器，以便将上述 SCSS 文件编译为 CSS。
克隆 Bootstrap github 存储库，因为编译器在某处需要按钮变体 mixins。
通过创建_bootstrap.scss 文件显式导入引导函数，如下所示。这将允许编译器访问 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。

【讨论】：

【解决方案8】：

这是我的风味，没有失去悬停。我个人更喜欢它比标准的引导转换。

.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>

【讨论】：

【解决方案9】：

删除按钮颜色类，如“btn-success”，并放置一个自定义类，如“btn-custom”，并为该类编写 css。这对我来说很有效。

HTML :

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

CSS:

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

【讨论】：

【解决方案10】：

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

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

【讨论】：

你看到了其他人没有看到的问题，但这并不能解决我的问题。

【解决方案11】：

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

【讨论】：

【解决方案12】：

我最近遇到了类似的问题，并设法通过添加类来解决它

  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，如果这个类用在input[type=submit]上。像这样：

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

【讨论】：

【解决方案13】：

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

http://blog.koalite.com/bbg/
在 boottrap.min.css 的末尾添加 CSS

干杯

【讨论】：

这很好很简单

【解决方案14】：

查看需要覆盖哪些属性的最简单方法是查看Bootstrap's source code，特别是mixins/buttons.less 中定义的.button-variant mixin。你仍然需要重写很多属性来摆脱所有.btn-primary 样式（例如:focus、disabled、下拉菜单中的用法等）。

更好的方法可能是：

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

【讨论】：

我也认为创建自定义版本的 Bootstrap 应该是解决此问题的理想方法，因为可能有很多属性需要更改。谢谢。
在第 3 步中 - 我尝试在使用 .btn-primary 时创建 LESS 混合，但 :hover 不起作用。我应该如何混合悬停状态？

【解决方案15】：

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

您还可以在 variables.less 文件中使用 less 并重新定义一些颜色

记住这一点，您的代码将看起来像这样：

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

【讨论】：

然后是边框颜色，仍然是蓝色。我想这样做的方法更少，对吧？
您也可以重新定义边框。
我还必须先更改背景图片才能更改颜色：background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%); 或 background-image: none;。