更改动画响应按钮的颜色答案

【问题标题】：Changing color of an animated responsive button更改动画响应按钮的颜色
【发布时间】：2019-08-31 04:12:24
【问题描述】：

我无法更改 CSS 中响应式引导按钮的颜色。

我正在使用带有 Html 的 Bootstrap 3。

<div class="col-md-12 text-center"> 
 <a data-animation="animated fadeInUp" class="header-requestbtn contactus-btn hvr-bounce-to-right" href="site/indexfdd4.html">PRODUCTS!</a></div> 
    <style>
        .header-requestbtn contactus-btn hvr-bounce-to-right {

         background-color: grey;
    }
    </style>

【问题讨论】：

您需要与. 连接您的css 类，或者只使用其中一个：.header-requestbtn.contactus-btn.hvr-bounce-to-right 或只使用.header-requestbtn 并删除样式标签中的其余类。

标签： html css twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

你的 CSS 错误。

.header-requestbtn.contactus-btn.hvr-bounce-to-right {
    background-color: grey;
}

【讨论】：

【解决方案2】：

做事

<div class="col-md-12 text-center"> 
    <a data-animation="animated fadeInUp" class="header-requestbtn contactus-btn hvr-bounce-to-right" href="site/indexfdd4.html">PRODUCTS!</a>
</div> 

<style>
.contactus-btn {
      background-color: grey;
}

</style>

【讨论】：

【解决方案3】：

假设你想在悬停时改变颜色，你需要在类的末尾添加:hover状态

.header-requestbtn.contactus-btn.hvr-bounce-to-right:hover { background: grey; }

【讨论】：

我不认为hover 是问题所在。这是他们的 CSS 类在样式标签中未正确设置（您确实显示正确）的事实。
好吧，我也解决了这些问题。但很难说，因为这个问题有点模糊

【解决方案4】：

我对班级名称的间距有疑问

这里将更正代码

<html>
    <style>
    .header-requestbtn_contactus-btn_hvr-bounce-to-right {
        background: grey;

}


</style>


  <div class="col-md-12 text-center"> 
    <a data-animation="animated fadeInUp" class="header-requestbtn_contactus-btn_hvr-bounce-to-right" href="site/indexfdd4.html">PRODUCTS!</a></div> 



</html>

【讨论】：

更改 OPs 类是一个非常糟糕的主意。如果contactus-btn 或hvr-bounce-to-right 类添加了不同的属性怎么办？这可能会进一步破坏他们的代码。