ナビゲーションバー内のボタンのフォントの色を変更する

Question

ナビゲーションバーに埋め込まれたボタンがあり、残りのナビゲーションバーのテキストの色を変更せずにボタンのフォント色を変更する方法が不思議です。

ボタンは緑色の背景にグレーのテキストが付いています。他のタブのテキストをグレーのままにして、白いテキストを緑色にする必要があります。

.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

変更#FFFFFFまたはwhiteから.button2のcolor属性。それ以外の場合は、背景と同じ色の緑色のテキストが表示されます。

Answer 2

さて、

あなたはcolor:がそう何か他にあれば変更すると何か

例えば破壊することなく、フォントの色を変更するだろうがされているフォントの着色のための属性が責任を負うことを知っている必要があります。

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>