Цвет кнопки загрузки Bootstrap

Question

У меня возникли проблемы с изменением цвета шрифта на белый на моей кнопке. Когда я вношу изменения в .btn-primary в свой CSS, я могу отредактировать кнопку точно так, как хочу, но когда я настраиваю цвет, ничего не происходит. Я попытался перейти на мой .caption-one button, чтобы изменить цвет там, и ничего не происходит. Не уверен, что еще попробовать. Вот как это выглядит.

Вот мой 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> 

Мой CSS для самой кнопки:

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

Все изменения, которые я сделал в .btn-primary показано выше случаться, за исключением цвета. добавление !important ничего не сделал.

Мой CSS для .caption-one button также ничего не делает

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

Любая помощь очень ценится.

Answer 1

Следующий код будет повторно цвет кнопки без необходимости полагаться на !important:

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

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

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

Если вы применили класс .btn и .btn-primary к вашему <a> вместо <button> (я не уверен, почему вы используете якорь, завернутый в кнопку), вы можете уменьшить общий CSS-код, который будет написан еще дальше.

Answer 2

Попробуйте это:

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