Bootstrap Button Farbe ändert sich nicht

Question

Ich habe ein Problem damit, die Schriftfarbe auf meiner Schaltfläche weiß zu ändern. Wenn ich Änderungen an .btn-primary in meinem CSS mache, kann ich die Schaltfläche genau so bearbeiten, wie ich möchte, aber wenn ich die Zielfarbe anwende, passiert nichts. Ich habe versucht, zu meinem .caption-one button zu gehen, um Farbe dort zu ändern, und nichts geschieht auch. Ich bin mir nicht sicher, was ich sonst noch versuchen sollte. So sieht es aus.

Hier ist mein 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> 

Meine CSS für die Schaltfläche selbst:

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

All die Änderungen, die ich an die .btn-primary oben hergestellt mit der Ausnahme, Farbe passieren. hinzufügen !important hat nichts getan.

Meine CSS für .caption-one button auch tut nichts

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

Jede Hilfe ist sehr geschätzt.

Answer 1

Der folgende Code wird umfärben die Taste ohne auf !important angewiesen zu sein:

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

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

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

Wenn Sie die .btn und .btn-primary Klasse Ihren <a> stattdessen angewandt von die <button> (Ich bin mir nicht sicher, warum Sie einen Anker in einer Schaltfläche eingewickelt verwenden) Sie können die gesamte CSS noch weiter reduzieren.

Answer 2

Versuchen Sie folgendes:

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