user3786102 user3786102 - 1 year ago 68
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

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>
<button type="button" class="btn btn-primary btn-lg hvr-underline-from-left"><a href="contact.html">Learn More</a></button>

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
shown above happen except color.
did nothing.

My CSS for
.caption-one button
also does nothing

.caption-one button {
color: #FAFAFA;

Any help is much appreciated.

Answer Source

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.