Bootstrap: Hovering over button with custom color not changing styling

Question

.btn-custom {
  background-color: hsl(90, 43%, 72%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5f0da", endColorstr="#b7d698");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#e5f0da), to(#b7d698));
  background-image: -moz-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -ms-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f0da), color-stop(100%, #b7d698));
  background-image: -webkit-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -o-linear-gradient(top, #e5f0da, #b7d698);
  background-image: linear-gradient(#e5f0da, #b7d698);
  border-color: #b7d698 #b7d698 hsl(90, 43%, 67.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.29);
  -webkit-font-smoothing: antialiased;
}

.btn-custom:hover{
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-block btn-custom"> Hello World </button>

I wanted to make custom button colors in bootstrap instead of using the default colors. This site does a wonderful job doing just that.

However, I noticed that when I apply that css class where I want, the color of the button properly displays, but the hover effect goes away.

In other words: When I hover over the button nothing happens (ex: the button does not go slightly lighter/darker).

Custom button color styling located in code snippet above.

And here is where I applied the styling inside my rails application:

<%= link_to('Some Link', "#", class: "btn btn-block btn-custom") %> 

Hovering over the link does not change the display of the button at all. I attempted adding this but it didn't work:

.btn-custom:hover{
  background-color: blue;
}

---

Update After Accepted Answers

For some reason in my rails project simply adding the following was not changing the styling upon hover:

.btn-custom:hover{
  background-color: blue;
}

However, when I went back to the website that provided custom button bootstrap styling, and wrapped the css code for the desired hover color within the .btn-custom:hover selector it worked!

example:

.btn-custom:hover{
  background-color: hsl(76, 96%, 18%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4fb69", endColorstr="#425901");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#d4fb69), to(#425901));
  background-image: -moz-linear-gradient(top, #d4fb69, #425901);
  background-image: -ms-linear-gradient(top, #d4fb69, #425901);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4fb69), color-stop(100%, #425901));
  background-image: -webkit-linear-gradient(top, #d4fb69, #425901);
  background-image: -o-linear-gradient(top, #d4fb69, #425901);
  background-image: linear-gradient(#d4fb69, #425901);
  border-color: #425901 #425901 hsl(76, 96%, 5%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.85);
  -webkit-font-smoothing: antialiased;
}

Answer 1

It worked for me when I used !important. Because, btn-custom uses !important to make sure it works with Bootstrap to override its styles, we need the same here too:

.btn-custom {
  background-color: hsl(90, 43%, 72%) !important;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5f0da", endColorstr="#b7d698");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#e5f0da), to(#b7d698));
  background-image: -moz-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -ms-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f0da), color-stop(100%, #b7d698));
  background-image: -webkit-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -o-linear-gradient(top, #e5f0da, #b7d698);
  background-image: linear-gradient(#e5f0da, #b7d698);
  border-color: #b7d698 #b7d698 hsl(90, 43%, 67.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.29);
  -webkit-font-smoothing: antialiased;
}

.btn-custom:hover{
  background-color: blue !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-block btn-custom"> Hello World </button>

Answer 2

Remove !important from .btn-custom or include !important to :hover. I recommend doing the former.

If you are trying to overwrite Bootstrap CSS, make sure the order of your custom CSS comes last as CSS follows top-down approach. You need not use !important in this way.

.btn-custom {
  background-color: hsl(90, 43%, 72%);
  background-repeat: repeat-x;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#e5f0da", endColorstr="#b7d698");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#e5f0da), to(#b7d698));
  background-image: -moz-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -ms-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5f0da), color-stop(100%, #b7d698));
  background-image: -webkit-linear-gradient(top, #e5f0da, #b7d698);
  background-image: -o-linear-gradient(top, #e5f0da, #b7d698);
  background-image: linear-gradient(#e5f0da, #b7d698);
  border-color: #b7d698 #b7d698 hsl(90, 43%, 67.5%);
  color: #333 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.29);
  -webkit-font-smoothing: antialiased;
}
.btn-custom:hover {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />


<button class="btn btn-block btn-custom">Hello World</button>