Question

我想将“新服务请求”的按钮文本更改为白色。请告知。

.btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info:hover{

background: #003366;

transition: 0.5s background;}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 1

您只需要定位.button-info a即可将文本的颜色更改为白色。

<style>

.btn-info { background: #0066cc; border: none; border-radius: 3px; font-size: 18px; padding: 10px 20px; }

.btn-info a, .btn-info:hover {
  color: white;
}

.btn-info:hover{

background: #003366;

transition: 0.5s background;}

</style>

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

还值得注意的是，您的HTML无效，嵌套结构<button><a></a></button>不被接受，并且可以由Markup Validation Service检查。看到以下错误：

错误：元素a不能作为button元素的后代。

代码的有效且简洁的版本如下：

<style>
  .btn-info {
    background: #0066cc;
    border: none;
    border-radius: 3px;
    font-size: 18px;
    padding: 10px 20px;
    color: white;
  }
  
  .btn-info:hover {
    background: #003366;
    transition: 0.5s background;
    cursor: pointer;
  }

</style>

<input type="button" class="btn-info" onclick="location.href='http://google.com';" value="Google" />

Answer 2

您需要将按钮内a标签的颜色设置为白色。

示例：

.btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
}

.btn-info a {
  color: white;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 3

尝试直接关注代码：

<input type="submit" style="font-face: 'Comic Sans MS'; font-size: larger; color: teal; background-color: #FFFFC0; border: 3pt ridge lightgrey" value=" Click On Me! ">

或者这个一分为二（在HTML和CSS分开的代码中）

.MyBtnClass
{
    font-size: 14px;
    color:yellow;
    background-color:green;
}

<input type="submit" class="MyBtnClass" value="Click . . ." />

Answer 4

将您的课程button-info更改为白色您可以执行以下操作。希望对您有帮助

.btn-info { 
background: #0066cc; 
border: none; 
border-radius: 5px; 
font-size: 14px; 
padding: 10px 10px; }

.btn-info a {
  color: #fff;
  text-decoration: none;
}

.btn-info:hover{
background-color: #003366;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 5

完全删除标签，并为按钮的悬停状态设置规则cursor: pointer：

.btn-info {
  background: #0066cc;
  border: none;
  border-radius: 3px;
  font-size: 18px;
  padding: 10px 20px;
  color: #fff;
}

.btn-info:hover {
  background: #003366;
  transition: 0.5s background;
  cursor: pointer;
}

<button class="btn-info">New Service Request</button>

Answer 6

尝试这个

.btn-info
{
    font-size: 13px;
    color:green;
}

<button class="btn-info"> <a href="LINK">New Service Request</a></button>

Answer 7

dependencies {
  compile 'com.github.tozny:java-aes-crypto:1.1.0' // Add this line
  ...
}

Answer 8

您应该定位内部的.button-info类以更改文本的颜色。

如何在按钮中更改文本颜色

8 个答案: