更改按钮字体的文本颜色，在导航栏内

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>