DYZ.Life

学编程半年后我终于搞懂了怎么调Bootstrap Button按下去的颜色

Ok so I haven’t updated this blog for a while. But this is actually blog-worthy. The colors of my Bootstrap buttons have been driving me nuts. I found various online tools that had CSS help to
auto-generate bootstrap buttons, but I guess they all forgot to address one situation: the “active” + “focus” state.

So I would have a nice customized btn that fits the orange theme of my site, the CSS looking like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$themeColor: #e55c1c;
$themeColorLite: #ff6600;
$background_grey: #f1f6fb;
$themeGrey: #777;
/* you can set the overall theme colors using the below code
at the top of any CSS file. They'd only apply to the file though,
so if you call these from other CSS, even if they're compiled by
Rails they wouldn't be recognized.*/
.btn-primary {
min-width: auto;
font-size: 16px;
color: $background_grey !important;
background-color: $themeColor;
border-color: transparent;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.hover, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background-color: #cd552b; //This is a darker orange when the mouse hovers over the button
border-color: transparent;
}

So I’d get a nice Bootstrap button that looks something like this:

Great, except when I click on it, it turns BLUE.

This isn’t really noticeable, except when you hold the mouse click for over 30ms or so, which most people don’t do. So I just left it there since the day of my first-ever Rails app.

A couple months later, this problem is still there. Right, because I’m my only front-end dev so if I don’t fix it, no one will. It was gradually driving me nuts.

So I finally decided to do it the right way - I opened up Twitter Bootstrap CSS file and found the btn-primary class, and discovered that the state which was blue was when a button is both “active” and “focused”. So I needed to add the following:

1
2
3
4
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
background-color: #983b1a; //I made an even darker shade of orange for when the mouse clicked on button
border-color: transparent;
}

And finally, no more blue on my orange button. Hope after reading this you won’t have to endure with this for as long.

热评文章