如何更改 mdl 按钮的背景颜色？

Question

Is there a way to change the background color of a FAB button from the framework of getmdl.io? I've already tried to add one more classname to button and change background-color but it doesn't work.

Answer 1

You can recolour a button by simply adding a color class to the list, this overwrites the existing color and uses the one you provide.

For example, a regular FAB button:

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">Some Text Here</i>
</button>

We can insert the color .mdl-color--amber-900 by adding it to the class list:

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored mdl-color--amber-900">
  <i class="material-icons">Some Text Here</i>
</button>