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

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.

我应该如何使用Materialize CSS更改

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.

更确切地说,我的

2 个解决方案

#1

It seems that red and green works fine.

似乎红色和绿色工作正常。

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

#2

JQuery

Add this script to the end of document

将此脚本添加到文档末尾

//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);
    });

Live Demo

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

#1