Changing Bootstrap 4.1 .btn-outline-primary background when clicked and active?

Question

I am currently using a Bootstrap 4.1 button with the class being .btn-outline-primary. In its regular state, the button has a white background with blue text. However, when you hover over the button, the colors are inverted such that the background is blue and the text is white.

The active state of this button is only a highlighted border (with button styling the same as inactive state - white background blue text) and I would like to make it so that when the button is clicked, the button remains in the same style as when the button is hovered.

However, I do not have access to the hover class of the button since it is a bootstrap button and I am wondering how I can achieve this? Here is the button:

<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>                                          
 <div class='d-flex flex-column justify-content-center align-items-center overflow-none'>                                                
  <div class='ButtonText line-height-16'>"Text Line One"</div>                                                                                                           
 </div>                                      
</button>

I have tried using css styling using :focus to change the background color, however, this just over-powers the text since the text does not invert and the background now matches the text color.

.btn-outline-primary:focus{
   background-color: #18f;
}

wassona wassona · Accepted Answer · 2019-05-30T18:41:15

I'm not a huge Bootstrap user or I'd look up the relevant classes for you. Instead, I'll walk you through the steps to find them yourself using DevTools. I'll be using Chrome, but the steps are similar for Firefox and Safari.

In a browser (again, preferably Chrome) where the button is rendered, right click on that button. From the menu, select Inspect.
The box that comes up should be on an elements tab, displaying your html. Confirm that the button is highlighted in that display. If it isn't, click on the button's html to highlight it.
The right side of the newly opened box should be a pane describing the selected element, and should be on the Styles tab. Confirm that the css rules that you'd expect to apply to the button are there.
Near the top of that pane, next to the filter box, there is a small button labeled :hov. Clicking that button displays the various pseudoclasses, like :hover, that can be applied to your element. Check the :hover checkbox.
The :hover rules should now display in the css rules list below. Find the relevant declaration (.btn-outline-primary:focus or something similar) and copy the rules it contains. You can then, in your own css, write

.btn-outline-primary:active {
  [whatever rules you copied]
}

I have two addenda:

If that doesn't work, go through the first four steps again, this time selecting the :active pseudoclass. If the rules you added are showing up in your rules list (they may be way down!) but aren't working, you have an issue with css specificity and should look that up
I have written this assuming that, when talking about an active button, you were using the term in the technical css sense, which is a change that only lasts so long as the button is held down. If you want the button to change permanently after it is clicked, you will need to use something outside of css: either use some Javascript to update the classes on the button or change it up and use a checkbox

Changing Bootstrap 4.1 .btn-outline-primary background when clicked and active?

1 Answers