如何通过在 CSS 中悬停时填充颜色的按钮显示文本？答案

【问题标题】：How do I make text show through a button that fills with color upon hover in CSS?如何通过在 CSS 中悬停时填充颜色的按钮显示文本？
【发布时间】：2022-12-16 08:02:00
【问题描述】：

我有以下 HTML 文档...

<!DOCTYPE html>
<html>

  <head></head>

  <body>
    <a href="https://google.com" class="main__btn">Get Started</a>
  </body>

</html>

随着 CSS 的出现...

* {
  margin: 0;
  padding: 0;
}

.main__btn {
  display: inline-block;
  font-size: 1rem;
  background-image: linear-gradient(to top, #d15858 0%, #3f3cf5 100%);
  padding: 1.5rem 32px;
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  z-index: 2;

}

.main__btn::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #662cb3;
  transition: all ease-in 0.32s;
  border-radius: 12px;
}

.main__btn:hover {
  color: white;
}

.main__btn:hover::after {
  width: 100%;
}

我遇到的这个问题是无法让文本显示填充按钮的颜色。

如何在填充按钮后通过颜色显示文本“Get Started”文本？

JSFiddle

【问题讨论】：

after 伪元素位于 'owning' 元素之上。通过给它 z-index: -1 将它推到它后面；

标签： html css hover

【解决方案1】：

.main__btn::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #662cb3;
  transition: all ease-in 0.32s;
  border-radius: 12px;
  z-index: -1
}

【讨论】：