Search code examples
materialize

I lose hover effect on customize button background color

if I change the standard color of button background, I lose the hover effect.

<a class="waves-effect waves-light btn blue"  href="">button</a>
<a class="waves-effect waves-light btn" href=""><i class="material-icons left">cloud</i>button</a>
<a class="waves-effect waves-light btn" href=""><i class="material-icons right">cloud</i>button</a>
Solution

  • It's because the background-color property are now covered by the new color you have selected. (In this case, I use blue darken-3).

    enter image description here enter image description here

    Best solution is to create another hover pseudo-class for the button, and don't forget the suffix !important