使用Bootstrap自定义更改按钮上的悬停颜色 [英] Change hover color on a button with Bootstrap customization

问题描述

我试图以一种方式来设计我的按钮，使悬停使按钮变得更浅，而不是更深的阴影。我尝试了引导自定义页面（ http://getbootstrap.com/customize/ ），但它没有给我更改按钮悬停颜色的选项。我试图这样做手动通过检查CSS，但它不清楚如何获得悬停颜色的按钮。我尝试了另一个自定义自定义网站。

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

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

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

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.

任何帮助将赞赏

推荐答案

按钮的颜色来自btn-x类（例如btn-primary，btn- success），所以如果你想通过编写自己的自定义CSS规则手动更改颜色，您需要更改：

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:

/*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*/
}

这篇关于使用Bootstrap自定义更改按钮上的悬停颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！