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

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:因此，將其更改為其他顏色將更改字體顏色而不會破壞其他任何顏色

例如。

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>