Question

刚做一个学校项目，我在w3学校找到了一个动画按钮。无论出于何种原因，我似乎无法改变按钮内部文本的颜色。我对HTML很新，所以如果你注意到我做错了什么并且可以做一个简短的解释，我将不胜感激！如果已经提出要求，或者这是补救措施，我会道歉。

.button {
  float: center;
  display: flex;
  display: inline-block;
  border-radius: 10px;
  background-color: #a6a6a6;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 26px;
  padding: 20px;
  min-width: 15.96%;
  transition: all 0.3s;
  cursor: pointer;
  margin: 5px;
  text-decoration: none;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

<button class="button" style="vertical-align:middle">
  <a href="first.html"><span>Home</span></button></a>
<button class="button" style="vertical-align:middle">
  <a href="index.html"><span>About me</span></button></a>
<button class="button" style="vertical-align:middle">
  <a href="contact.html"><span>Contact</span></button></a>
<button class="button" style="vertical-align:middle">
  <a href="projects.html"><span>Projects</span></button></a>
<button class="button" style="vertical-align:middle">
  <a href="resume.html"><span>Resume</span></button></a>
<button class="button" style="vertical-align:middle">
  <a href="other.html"><span>Other</span></button></a>

Answer 1

这些<a>链接会覆盖您设置的颜色。重新着色链接本身：

.button a{
    color:#FFFFFF;
}

您还关闭了按钮后的<a>标签，但应该在按钮之前完成，否则您的层次结构会出错。

演示：

.button a{
   color: #FFFFFF; 
}
.button {
  float: center;
  display: flex;
  display: inline-block;
  border-radius: 10px;
  background-color: #a6a6a6;
  border: none;
  text-align: center;
  font-size: 26px;
  padding: 20px;
  min-width: 15.96%;
  transition: all 0.3s;
  cursor: pointer;
  margin: 5px;
  text-decoration: none;
  
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
.button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.button:hover span {
  padding-right: 25px;
}
.button:hover span:after {
  opacity: 1;
  right: 0;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>About me</title>
    <link rel="stylesheet" href="main.css">
  </head>

  <body>
    <button class="button" style="vertical-align:middle"><a href="first.html"><span>Home</span></a></button>
    <button class="button" style="vertical-align:middle"><a href="index.html"><span>About me</span></a></button>
    <button class="button" style="vertical-align:middle"><a href="contact.html"><span>Contact</span></a></button>
    <button class="button" style="vertical-align:middle"><a href="projects.html"><span>Projects</span></a></button>
    <button class="button" style="vertical-align:middle"><a href="resume.html"><span>Resume</span></a></button>
    <button class="button" style="vertical-align:middle"><a href="other.html"><span>Other</span></a></button>

    </div>
  </body>

</html>

Answer 2

一个HTML标记已关闭 - 未正确嵌套..使用此.. <a>标记在以下代码中正确嵌套：

<button class="button" style="vertical-align:middle"><a href="first.html"><span>Home</span></a></button>
<button class="button" style="vertical-align:middle"><a href="index.html"><span>About me</span></a></button>
<button class="button" style="vertical-align:middle"><a href="contact.html"><span>Contact</span></a></button>
<button class="button" style="vertical-align:middle"><a href="projects.html"><span>Projects</span></a></button>
<button class="button" style="vertical-align:middle"><a href="resume.html"><span>Resume</span></a></button>
<button class="button" style="vertical-align:middle"><a href="other.html"><span>Other</span></a></button>

然后你可以用它来正确地着色它：

.button a span{
  color:#FFF;
}

FIDDLE

Answer 3

请您尝试更改按钮跨度部分???

替换此

.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 */
}

Answer 4

您不需要按钮和一个锚标记。这是多余的，只需将按钮类添加到您的锚标签，就像这样..

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

重复其他按钮。

Answer 5

你很接近，但这是示例代码：

Dim page = New TabPage()

page.Controls.Add(new Form With { .TopMost = false, .TopLevel = false, .FormBorderStyle = FormBorderStyle.None, .Dock = DockStyle.Fill })

TabControlX.TabPages.Add(page)

这里是CSS：

<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：https://jsfiddle.net/UXEngineer/0847o2ym/1/

无法更改动画按钮

5 个答案: