css - Suggested method to override button background colour?

Question

How should I go about changing background-color CSS property for <button> element using Materialize CSS? It seems that for most other elements simply adding a class of, for example, .red or .yellow will change the background colour, but not for the button elements.

Is there any non-obtrusive way?

EDIT:

To be more precise, my <button> element has these classes: btn waves-effect waves-light red, but its colour remains default blue.

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