CODEWITHSUNDEEP
csstwitter-bootstrap
Tetramputechture
Tetramputechture

Reputation: 2921

Have bootstrap button not change on click?

I'm new to bootstrap and I'm trying to make a set of buttons that only execute an action when clicked, and nothing else (e.g. not change the color of the button fill, not change the outline color, just have it stay the same like the navbar buttons here.)

This is what I have so far:

.btn-default {
  font-family: Monospace;
  font-size: 20px;
  color: #F5C173;
  background-color: #8F390D;
  border-color: #8F390D;
  border-radius: 0px;
}

.btn-default:hover {
  background-color: #8F390D;
  border-color: #8F390D;
  color: #9F590D;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), -2px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1);
}

And here's where I declare the buttons:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <button type="button" class="btn navbar-btn btn-default" style="float: right">about</button>
    <button type="button" class="btn navbar-btn btn-default" style="float: right">portfolio</button>
    <button type="button" class="btn navbar-btn btn-default" style="float: right">contact</button>
  </div>
</nav>

Basically, I want the hover effect to persist regardless if the button is clicked or not.

Thanks!

Upvotes: 2

Views: 297

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

Simply add important behind everything you want to stay the same, like this:

.btn-default {
  font-family: Monospace;
  font-size: 20px;
  color: #F5C173!important;
  background-color: #8F390D!important;
  border-color: #8F390D!important;
  border-radius: 0px;
  box-shadow: none!important;
}

.btn-default:hover {
  background-color: #8F390D!important;
  border-color: #8F390D!important;
  color: #9F590D!important;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1), -2px 2px 2px rgba(0, 0, 0, 0.1), 2px 2px 2px rgba(0, 0, 0, 0.1)!important;
}

Upvotes: 1

Related Questions