建议的方法来覆盖按钮背景颜色？答案

【问题标题】：Suggested method to override button background colour?建议的方法来覆盖按钮背景颜色？
【发布时间】：2015-08-25 06:28:29
【问题描述】：

我应该如何使用 Materialize CSS 更改 <button> 元素的 background-color CSS 属性？似乎对于大多数其他元素，只需添加一个类，例如 .red 或 .yellow 就会改变背景颜色，但按钮元素不会。

有什么不显眼的方法吗？

编辑：

更准确地说，我的<button> 元素有这些类：btn waves-effect waves-light red，但它的颜色仍然是默认的蓝色。

【问题讨论】：

标签： css material-design materialize

【解决方案1】：

似乎red 和green 工作正常。

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.css" rel="stylesheet" />

<button class="btn waves-effect waves-light red" type="submit" name="action">Submit
  <i class="mdi-content-send right"></i>
</button>

<button class="btn waves-effect waves-light green" type="submit" name="action">Submit
    <i class="mdi-content-send right"></i>
  </button>

【讨论】：

确实如此。非常感谢 Paulie_D。您的回答帮助我发现蓝色是在另一个我不知道的 CSS 文件中定义的。再次感谢。

【解决方案2】：

JQuery

将此脚本添加到文档末尾

//Preassign a default color

$(".btn").css("background-color", "blue");

// get random color
function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
       color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

$(document).ready(function(){

    // update button color
    $("button").click(function(){
      var themeColor = getRandomColor();
      $(".btn").css("background-color", themeColor);
    });

现场演示

https://codepen.io/hiteshsahu/pen/EXoPRq

【讨论】：