CSS 如何在 Bootstrap 中更改 btn 颜色

How to change btn color in Bootstrap

提问by Sam

Is there a way to change all .btnproperties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether?

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

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

采纳答案by ckuijjer

The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variantmixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primarystyling (e.g. :focus, disabled, usage in dropdowns etc).

查看需要覆盖哪些属性的最简单方法是查看Bootstrap 的源代码，特别是.button-variant在mixins/buttons.less 中定义的mixin 。您仍然需要覆盖相当多的属性以摆脱所有.btn-primary样式（例如:focus，disabled在下拉列表中的使用等）。

A better way might be to:

更好的方法可能是：

1. Create your own customized version of Bootstrap using Bootstrap's online customization tool
2. Manually create your own color class, e.g. .btn-whatever
3. Use a LESS compiler and use the .button-variantmixin to create your own color class, e.g. .btn-whatever

1. 使用Bootstrap 的在线定制工具创建您自己定制的 Bootstrap 版本
2. 手动创建您自己的颜色类，例如 .btn-whatever
3. 使用 LESS 编译器并使用.button-variantmixin 创建您自己的颜色类，例如.btn-whatever

回答by Gold Pearl

If you want to override any default properties in bootstrap you have to make the properties as important.

如果你想覆盖 bootstrap 中的任何默认属性，你必须让这些属性变得重要。

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

i hope this will works for you.

我希望这对你有用。

回答by Semyon Zhikharev

I guess you forgot .btn-primary:focusproperty and comma after .btn-primary

You also can use less and redefine some colors in variables.less file

With this in mind your code will be look like this:

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

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

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

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

回答by Zim

2019 Update for Bootstrap 4

2019 年 Bootstrap 4 更新

Now that Bootstrap 4 uses SASS, you can easily change the primary button colorusing the button-variantmixins:

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

$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://www.codeply.com/go/2bHYxYSC0n(SASS demo)

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

This SASS compiles into the following CSS...

这个 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://www.codeply.com/go/lD3tUE01lo(CSS demo)

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

---

---

To change the primary color for allclasses see: Customizing Bootstrap CSS templateand How to change the bootstrap primary color?

要更改所有类的主要颜色，请参阅：自定义 Bootstrap CSS 模板和如何更改引导程序主要颜色？

回答by Ron

Just create your own button on:

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

• http://blog.koalite.com/bbg/
• add the CSS at the end off your boottrap.min.css

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

Cheers

干杯

回答by Stanislav Vincent

You have missed one style ".btn-primary:active:focus" which causes that still during btn click default bootstrap color show up for a second. This works in my code:

您错过了一种样式“.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;}

回答by Manab Das

Remove the button color class like "btn-success" and put a custom class like "btn-custom" and write css for that class. That simply works for me.

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

HTML :

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

CSS:

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

回答by clamchoda

Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning.

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

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

回答by GavinBelson

The simplestway is to:

在最简单的方法是：

1) intercept every button state

1) 拦截每一个按钮状态

2) add !importantto override the states

2）添加!important覆盖状态

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

---

---

The more practicalUI way is to make the hover state of the button darker than the original state:

更实用的UI方式是让按钮的悬停状态比原来的状态更暗：

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

回答by Taika

I had run into the similar problem recently, and managed to fix it with adding 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; }

Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:

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

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