Изменение цвета текста шрифта на кнопке, в строке навигации

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

Изменить атрибут color из .button2 в #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>