使用 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屋！