Html Can'；t更改动画按钮内文本的颜色

我刚刚为学校做了一个项目，我使用了w3学校的一种风格制作了一个动画按钮。无论出于何种原因，我似乎无法更改按钮内文本的颜色。我对HTML是相当陌生的，所以如果您注意到我做错了什么，并能给出一个简短的解释，我们将不胜感激！如果已经有人问过，或者这是补救措施，我道歉

。按钮{
浮动：中心；
显示器：flex；
显示：内联块；
边界半径：10px；
背景色：#A6；
边界：无；
颜色：#FFFFFF；
文本对齐：居中；
字号：26px；
填充：20px；
最小宽度：15.96%；
过渡：均为0.3秒；
光标：指针；
保证金：5px；
文字装饰：无；
}
.按钮跨度{
光标：指针；
显示：内联块；
位置：相对位置；
过渡：0.5s；
}
.按钮跨度：之后{
内容：“»”；
位置：绝对位置；
不透明度：0；
排名：0；
右：-20px；
过渡：0.5s；
}
.按钮：悬停范围{
右边填充：25px；
}
.按钮：悬停范围：之后{
不透明度：1；
右：0；
}

这些

这些

一个HTML标记已关闭--嵌套不正确。。用这个。。HTML标记中的

一个已关闭--嵌套不正确。。用这个。。
您可以通过更改按钮跨距部分来尝试吗

替换这个

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

由此

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: red; /* or whatever you like */
}

你能试着换一下按钮的跨距部分吗

替换这个

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

由此

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
  color: red; /* or whatever you like */
}

您不需要按钮和锚定标记。这是多余的，只需将button类添加到锚点标记中，如下所示

<a class="button" href="first.html" style="vertical-align:middle"><span>Home</span></a>



对其他按钮重复上述操作。
您不需要按钮和锚定标签。这是多余的，只需将button类添加到锚点标记中，如下所示

<a class="button" href="first.html" style="vertical-align:middle"><span>Home</span></a>



对其他按钮重复此操作。
您很接近，但下面是示例代码：

<button class="button"><a href="first.html"><span>Home</span></a></button>
<button class="button"><a href="index.html"><span>About me</span></a></button>
<button class="button"><a href="contact.html"><span>Contact</span></a></button>
<button class="button"><a href="projects.html"><span>Projects</span></a></button>
<button class="button"><a href="resume.html"><span>Resume</span></a></button>
<button class="button"><a href="other.html"><span>Othe</span></a></button>

还有，这里是jsfiddle:
您很接近，但下面是示例代码：

<button class="button"><a href="first.html"><span>Home</span></a></button>
<button class="button"><a href="index.html"><span>About me</span></a></button>
<button class="button"><a href="contact.html"><span>Contact</span></a></button>
<button class="button"><a href="projects.html"><span>Projects</span></a></button>
<button class="button"><a href="resume.html"><span>Resume</span></a></button>
<button class="button"><a href="other.html"><span>Othe</span></a></button>

还有，这里是jsfiddle:
两个问题：为什么给
一类“按钮”？您可以将这些元素设置为样式并引用为
按钮
。其次为什么按钮中有
标签？这在语义上是不正确的。你还得到了一个零散的
标记，你错误地关闭了
和
。我对html非常陌生，我不知道我不需要这个类。说到你的第二部分，你的意思是我可以直接使用href吗？我会用另一种方式。使用
标记代替
。按钮用于表单，锚定（
）标记用于将用户重定向到另一个页面/页面的一部分。谢谢@putvande，我想我现在明白了，这确实有效。几个问题：为什么给
一类“按钮”？您可以将这些元素设置为样式并引用为
按钮
。其次为什么按钮中有
标签？这在语义上是不正确的。你还得到了一个零散的
标记，你错误地关闭了
和
。我对html非常陌生，我不知道我不需要这个类。说到你的第二部分，你的意思是我可以直接使用href吗？我会用另一种方式。使用
标记代替
。按钮用于表单，锚定（
）标记用于将用户重定向到另一个页面/页面的一部分。谢谢@putvande，我想我现在明白了，这确实有效。啊，我现在明白了。非常感谢您提供的信息。上面有人说，按钮里面是不正确的，这样做是不好的做法吗？@Wardy这不是一个不好的做法，只是错了。你应该保持等级制度。啊，我现在明白了。非常感谢您提供的信息。上面有人说，按钮里面是不正确的，这样做是不好的做法吗？@Wardy这不是一个不好的做法，只是错了。你应该保持等级制度。：DD哈哈，再次谢谢你，我相信这是补救措施，但我很高兴你告诉了我正确的方法。所有的答案都非常感谢，但我很高兴你指出了我所展示的内容的多余之处。：DD哈哈，再次感谢你，伙计，我相信很多都是补救措施，但我很高兴你展示了正确的方法。所有的答案都非常感谢，但我很高兴你指出了我展示的内容的冗余。