Question

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

有没有非突兀的方式？

编辑：

更准确地说，我的<button>元素包含以下类：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

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

2 个答案: