user3786102 user3786102 - 5 months ago 20
CSS Question

Bootstrap Button Color Not Changing

I'm having some trouble getting the font color to change to white on my button. When I make changes to

.btn-primary
in my CSS I can edit the button exactly how I want, but when I target color nothing happens. I tried going to my
.caption-one button
to change color there and nothing happens either. Not sure what else to try. Here is what it looks like.

enter image description here

Here is my html

<!-- Wrapper for Slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<img src="img/golden_egg3.jpg" class="img-responsive first-slide" alt="First slide">
<div class="container">
<div class="carousel-caption">
<div class="caption-one">
<h1>The right Wealth Advisor can make a big difference.</h1>
<br>
<button type="button" class="btn btn-primary btn-lg hvr-underline-from-left"><a href="contact.html">Learn More</a></button>
</div>
</div>
</div>
</div>
</div>


My CSS for the button itself:

.btn-primary {
text-transform: uppercase;
border: none;
background-color: #50b948; /*Green*/
font-family: 'Quicksand', sans-serif;
}


All of the changes I made to the
.btn-primary
shown above happen except color.
adding
!important
did nothing.

My CSS for
.caption-one button
also does nothing

.caption-one button {
color: #FAFAFA;
}


Any help is much appreciated.

Answer

The following code will re-color the button without needing to rely on !important:

.caption-one .btn-primary { 
  background: #50b948;
  border-color: #33912c;
}

.caption-one .btn-primary a {
  color: #fafafa;
}

.caption-one .btn-primary:hover { 
  background: #33912c;
}

If you applied the .btn and .btn-primary class to your <a> instead of the <button> (I'm not sure why you're using an anchor wrapped in a button) you can reduce the total CSS written even further.