My button group looks like this:
HTML
<div class="btn-group">
<button type="button" class="btn btn-default btn-xs red-outline-button"> Sync </button>
<button type="button" class="btn btn-default btn-xs gold-outline-button" data-toggle="dropdown">New PG </button>
<ul class="dropdown-menu">
<li><a href="#"> Test1</a></li>
<li><a href="#"> Test2</a></li>
</ul>
</div>
CSS:
.red-outline-button:hover {
border-color: #C4213C;
background-color: #f8d3d9;
color: #000
}
.gold-outline-button:hover {
border-color: #B3892F;
background-color: #f4ebd7;
color: #000;
}
The current behavior is that the color changes when hovering over the buttons. However, when clicking and holding or opening the dropdown menu from the second button, the color reverts back to default gray.
I've attempted to use .red-outline-button:active without success.
So, my question is, what is the correct way to adjust the CSS color when:
- The button is clicked
- The dropdown menu is opened (only styling the button itself, not the dropdown)