css - 背景颜色的文本透明问题

Question

我正在制作一个按钮，我想实现一种您可以在此处看到的有趣效果。

问题是，当我悬停在文本 rgba(0,0,0,0.0); 上时，所有按钮都变成白色，甚至是文本。

到目前为止，这是我的代码:

.button{
    height: 40px;
    border-radius: 5px;
    border: 2px solid #fff;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 2.4em;
    cursor: pointer;
}

.button:hover{
    background: #fff;
    color: rgba(0,0,0,0.0)
}

Answer 1

原因是因为你的悬停color:设置为透明，所以当然会是白色。尝试如下更简单的方法:

.button {
  color: blue;
  background: white;
  padding: 5px 10px;
  border: 3px solid blue;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.3s;
}
.button:hover {
  color: white;
  background: blue;
}

<a href="alink.html" class="button">button</a>