html - 仅CSS，是否可以在悬停时同时将按钮中的每个字母更改为不同的颜色？

Question

首先我应该说我还在学习CSS。我对此还不太了解。

目前，这就是我的按钮:

button {
  border: none;
  right: 0;
  position: fixed;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  width: 100px;
  padding: 10px;
  margin: 5px;
  text-align: center;
  background-color: black;
  color: white;
  word-wrap: break-word;
  transition: all ease 1s;
}
button:hover {
  background-color: white;
}

<a href="http://www.google.com">
  <button>Google</button>
</a>

如您所见，该按钮位于 a 标记内的固定位置，因此我可以单击整个框而不仅仅是文本。我添加了过渡效果，这样背景就会褪色为白色，但我删除了文本颜色，因为我想为每个字母添加特定的颜色，而不是将它们全部更改为相同的颜色。例如，如果我将鼠标悬停在按钮上，我希望所有颜色同时更改为特定颜色(这将是 Google 颜色)。

我知道更改每个颜色的唯一方法是使用不同的颜色向每个颜色添加一个 span 标签，然后添加 :hover，但是当我将鼠标悬停在它上面时，只有该字母会发生变化。

是否可以仅使用 CSS 来完成此任务？

编辑:如果我的代码有任何不必要的错误，请告诉我。正如我所说，仍在学习。

Answer 1

是的，这是可能的。

您需要给每个字母一个标签和一个特殊的类。特殊类将定义颜色。

button {
  color: black;
}

button:hover .blue {
  color: blue;
}

button span {
    transition: all 0.5s ease;
}

button:hover .red {
  color: red;
}

button:hover .yellow {
  color: yellow;
}

button:hover .green {
  color: green;
}

<button>
  <span class="blue">G</span>
  <span class="red">o</span>
  <span class="yellow">o</span>
  <span class="blue">g</span>
  <span class="green">l</span>
  <span class="red">e</span>
</button>