我应该如何使用Materialise CSS更改background-color
<button>
元素的CSS属性?似乎对于大多数其他元素,只需添加一个类,例如.red
或.yellow
将改变背景颜色,但不会改变按钮元素。
有没有非突兀的方式?
编辑:
更准确地说,我的<button>
元素包含以下类:btn waves-effect waves-light red
,但其颜色仍为默认蓝色。
答案 0 :(得分:2)
似乎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>
答案 1 :(得分:0)
<强> 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);
});
现场演示