使用Bootstrap自定义更改按钮上的悬停颜色

I am trying to style my buttons in a way that the hover makes the button a lighter shade instead of a darker shade. I tried bootstrap customization page(http://getbootstrap.com/customize/) and it doesn't give me an option to change the button hover color. I tried doing this manually by inspecting the CSS but it is unclear how the buttons are getting the hover color. I tried another bootstrap customization website

我试图按下按钮的样式，使悬停使按钮变浅，而不是更暗的阴影。我试过bootstrap自定义页面（http://getbootstrap.com/customize/），它没有给我一个选项来改变按钮悬停颜色。我尝试通过检查CSS手动完成此操作，但目前还不清楚按钮是如何获得悬停颜色的。我尝试了另一个bootstrap定制网站

http://pikock.github.io/bootstrap-magic/app/#!/editor

I wanted the main color to be #0495c9 and the hover color to be #00b3db but I am only able to specify the button bg color and not it's hover color.

我希望主色为＃0495c9，悬停颜色为＃00b3db，但我只能指定按钮bg颜色，而不是它的悬停颜色。

Any help will be appreciated

任何帮助将不胜感激

3 个解决方案

#1

The color for your buttons comes from the btn-x classes (e.g., btn-primary, btn-success), so if you want to manually change the colors by writing your own custom css rules, you'll need to change:

按钮的颜色来自btn-x类（例如，btn-primary，btn-success），因此如果要通过编写自己的自定义css规则手动更改颜色，则需要更改：

/*This is modifying the btn-primary colors but you could create your own .btn-something class as well*/
.btn-primary {
    color: #fff;
    background-color: #0495c9;
    border-color: #357ebd; /*set the color you want here*/
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #00b3db;
    border-color: #285e8e; /*set the color you want here*/
}

#2

This is the correct way to change btn color.

这是改变btn颜色的正确方法。

 .btn-primary:not(:disabled):not(.disabled).active, 
    .btn-primary:not(:disabled):not(.disabled):active, 
    .show>.btn-primary.dropdown-toggle{
        color: #fff;
        background-color: #F7B432;
        border-color: #F7B432;
    }

#3

-2

First, only import then pieces of bootstrap that you are actually using. Then, override the buttons mixin with your own.

首先，只导入你实际使用的引导程序。然后，用您自己的按钮覆盖mixin。

#1