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

Question

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

有什么不突兀的方法吗？

编辑：

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

Answer 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>

Answer 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

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

Suggested method to override button background colour?

css

materialize

material-design