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

将A的{{1}}属性更改为color或.button2。否则，您告诉它有绿色文本，颜色与背景颜色相同。

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>

在导航栏中更改按钮字体文本颜色

2 个答案: