Html 如何在css中更改btn默认值的颜色

我无法更改按钮的颜色。该类为“btn默认”。 当我将鼠标悬停在按钮上时，只能看到半个按钮的颜色。 以下是我的html代码：

  <div class="pageOne">
        <div class="block text-center">
            <h1  id="header_text1"> a Good Tree production </h1>
            <h2  id="header_text2">We Review What We Watch</h2>
        </div>
    <div class="btnList">
         <a class="btn btn-default" href = "#"> a Good Tree production</a>
         <a class="btn btn-default" href = "#"> About Us</a>
         <a class="btn btn-default" href = "#"> Contact Us</a>
         <a class="btn btn-default" href = "#"> Works</a>
    </div>
</div>

以下是我的实时输出链接：

有谁能帮我解决这个问题吗

.btn-default:hover {
    background: #333;
}

---

您可以将背景位置更改为：

.btn-default:focus, .btn-default:hover {
    background-color: #e0e0e0;
    background-position: 0 -50px;
}

或

---

只需将这一行添加到您现有的css

背景图像：无！重要的

检查此工作片段--


.btn默认值{
背景色：黑色！重要；
颜色：#0D9E69；
字体系列：“Barrio”，草书；
边界半径：0px；
字体大小：20px！重要；
背景图像：无！重要；
}

优良的树木生产
我们回顾我们所看的
您唯一需要做的是：

background-image: none;

您的问题的解决方案是添加
背景图像：无！重要的
在您的css中的btn默认值内，它将如下所示

    .btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
    background-image: none !important;
}

现在修改btn默认值的问题是，它将删除btn默认值的设计目的。我建议您添加您自己的背景颜色为黑色的类，并使用它而不是btn默认值，以避免对boostrap进行常规更改。例如，在您的代码中，将btn默认值从html代码更改为my btn默认值，并将其更改为css代码，使代码如下所示

.my-btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
  background-image:none !important;
}

和html格式

  <div class="btnList">
     <a class="btn my-btn-default" href = "#"> a Good Tree production</a>
     <a class="btn my-btn-default" href = "#"> About Us</a>
     <a class="btn my-btn-default" href = "#"> Contact Us</a>
     <a class="btn my-btn-default" href = "#"> Works</a>
  </div>



通过这种方式，它不会中断任何引导。
引导使用
.btn default
上的背景图像，因此您也需要覆盖它。
.my-btn-default{
    background-color: black !important;
    color: #0D9E69;
    font-family: 'Barrio', cursive;
    border-radius: 0px;
    font-size: 20px !important;
  background-image:none !important;
}

  <div class="btnList">
     <a class="btn my-btn-default" href = "#"> a Good Tree production</a>
     <a class="btn my-btn-default" href = "#"> About Us</a>
     <a class="btn my-btn-default" href = "#"> Contact Us</a>
     <a class="btn my-btn-default" href = "#"> Works</a>
  </div>