Ändern der Schaltfläche font text color, in der nav bar

Question

Ich habe eine Schaltfläche in meine Nav-Leiste eingebettet und ich frage mich, wie Sie die Schriftfarbe der Schaltfläche ändern, ohne den Rest der Nav-Bar Textfarbe zu ändern.

Schaltfläche ist auf einem grünen Hintergrund mit grauem Text. Müssen Sie weißen Text auf Grün machen, während Sie anderen Tab-Text grau halten.

.button2 { 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    -o-appearance: none; 
 
    -ms-appearance: none; 
 
    appearance: none; 
 
    background: #82b440; 
 
    border-radius: 1em; 
 
    border: solid; 
 
    border-color: #82b440; 
 
    color: #82b440; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    height: 4em; 
 
    padding: 0em 1.3em; 
 
    letter-spacing: 1px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 1.4em; 
 
    text-decoration-color: white; 
 
    -moz-transition: all 0.35s ease-in-out; 
 
    -webkit-transition: all 0.35s ease-in-out; 
 
    -o-transition: all 0.35s ease-in-out; 
 
    -ms-transition: all 0.35s ease-in-out; 
 
    transition: all 0.35s ease-in-out; 
 
}

<div id="header"> 
 
    <div class="container"> 
 

 
    <!-- Logo --> 
 
    <a href="index"> 
 
     <img src="images/Picture2.png"> 
 
    </a> 
 

 
    <!-- Nav --> 
 
    <nav id="nav"> 
 
     <ul> 
 
     <li><a href="page">Other Page Text</a> 
 
     </li> 
 
     ** 
 
     <li><a href="quote" class="button2">Button Text</a> 
 
     </li>** 
 

 
     </ul> 
 
    </nav> 
 

 
    </div> 
 
</div>

Answer 1

Ändern der color Attribut .button2 zu #FFFFFF oder white. Andernfalls sagen Sie ihm, dass er grünen Text haben soll, der die gleiche Farbe wie der Hintergrund hat.

Answer 2

Okay,

Sie sollten wissen, dass das Attribut für Schrift Färbung verantwortlich ist dort color: so, wenn etwas zu ändern sonst würde die Schriftfarbe ändern, ohne dass zB etwas anderes

zu zerstören.

color: #F5F5F5; 

.button2 { 
 
-moz-appearance: none; 
 
-webkit-appearance: none; 
 
-o-appearance: none; 
 
-ms-appearance: none; 
 
appearance: none; 
 
background: #82b440; 
 
border-radius: 2px; 
 
border: 1px solid #82b440; 
 
color: #f5f5f5;  /* What matters here */ 
 
cursor: pointer; 
 
display: inline-block; 
 
padding: 10px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4); 
 
letter-spacing: 1px; 
 
text-align: center; 
 
text-decoration: none; 
 
text-transform: uppercase; 
 
font-size: 1.4em; 
 
text-decoration-color: white; 
 
-moz-transition: all 0.35s ease-in-out; 
 
-webkit-transition: all 0.35s ease-in-out; 
 
-o-transition: all 0.35s ease-in-out; 
 
-ms-transition: all 0.35s ease-in-out; 
 
transition: all 0.35s ease-in-out; 
 
} 
 

 
.button2:hover{ 
 
border: 1px solid #8fc04e; 
 
    background: #8fc04e; 
 
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.65); 
 
}

<a href="#quote" class="button2">Button Text</a>