更改按鈕字體的文本顏色，在導航欄內

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

變化.button2的color屬性#FFFFFF或white。否則，你告訴它有綠色的文字，與背景顏色相同。

Answer 2

好吧，

你應該知道，負責字體顏色屬性有color:如此改變，如果別的東西會改變字體顏色，不破壞任何東西

EG。

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>