如何解决CSS按钮Hover填充颜色时文字被遮挡的问题？

问题出在你用::after伪元素实现hover填充效果时，伪元素的堆叠层级高于按钮内的文字，导致hover时文字被覆盖。

只需要给.main__btn::after添加z-index: -1，让伪元素位于文字下方即可：

* {
  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;
  z-index: -1; /* 添加这一行 */
}

.main__btn:hover {
  color: white;
}

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

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

原理：由于.main__btn设置了position: relative，伪元素的z-index: -1会将其堆叠层级降到父元素内容的下方，这样hover时伪元素的填充效果不会遮挡上方的文字。

内容的提问来源于stack exchange，提问作者Ryan