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:
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:
And finally, no more blue on my orange button. Hope after reading this you won’t have to endure with this for as long.