CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
blueren
blueren

Reputation: 2860

Changing colors on bootstrap buttons and dropdown-toggle

I have a button group as below:

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 above works. When I hover the mouse over the buttons, the color changes. However, When I click and hold or click the second button to reveal the dropdown, then, the color switches back to the default gray.

I've tried .red-outline-button:active but that did not help.

My question is, what is the right way to set css colour when:

  1. Button is pressed
  2. Dropdown is opened (only the button. I don't need to style the actual dropdown

Upvotes: 2

Views: 4399

Answers (3)

Reuben Gomes
Reuben Gomes

Reputation: 860

This would fix it click is another event will not take hover properties

 .red-outline-button:hover,.red-outline-button:active,.red-outline-button:focus {
      border-color: #C4213C;
      background-color: #f8d3d9;
      color: #000
    }

    .gold-outline-button:hover,.gold-outline-button:active,.gold-outline-button:focus {
      border-color: #B3892F;
      background-color: #f4ebd7;
      color: #000;
    }

Upvotes: 0

El Devoper
El Devoper

Reputation: 1093

Just add .gold-outline-button:focus to the selector and !important the the styles to override the default Bootstrap styles.

e.g.

.gold-outline-button:hover, .gold-outline-button:focus {
  border-color: #B3892F !important;
  background-color: #f4ebd7 !important;
  color: #000 !important;
}

This should solve both Problems. See it in action here: https://jsfiddle.net/sytc4pc5/

Upvotes: 0

Troyer
Troyer

Reputation: 7013

You need to override the default Bootstrap classes:

 .btn-default.focus, .btn-default:focus

This will work in case you don't want to override all:

.gold-outline-button:hover, .gold-outline-button.focus, .gold-outline-button:focus {
  border-color: #B3892F;
  background-color: #f4ebd7;
  color: #000;
}

Working demo: http://www.bootply.com/Li7tkXlF9P

Hope it helps you. :)

Upvotes: 2

Related Questions