Question

我正在为我的网站创建可单击的CSS按钮，并且想要一个带有白色文本的绿色按钮。但是我的默认链接颜色（蓝色）会覆盖所有内容，并使按钮具有绿色背景，但带有蓝色下划线的链接。我需要更改什么？

.td-post-content a {
    color: #2200CC;
    text-decoration: underline;

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

.button a:link {
    color: white;
}

<p style="text-align: center;"><a class="td-post-content button" href="https://www.expatkings.com/join">Join Now</a></p>

除了td-post-content链接为蓝色和带下划线的链接外，我的按钮除外，而按钮链接应为绿色和白色的文本。

Answer 1

我想您可以只添加所有与“ a”标记一起使用的css伪类：

https://css-tricks.com/snippets/css/link-pseudo-classes-in-order/ https://www.w3schools.com/css/css_pseudo_classes.asp

.button,
.button:link,
.button:visited,
.button:hover,
.button:active{
  color: white;
  background: green;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
}

<a class="button" >Name</a>

Answer 2

尝试使用！important。这将覆盖标准链接颜色。

.button{
    color: white !important;
}

Answer 3

：link用于具有href属性但尚未被访问的元素。如果您希望设置链接的所有状态的样式，请使用以下命令：

.button a {
    color: white;
}

自定义CSS按钮链接颜色

3 个答案: