Angular material md-button hover color change

问题

 <div class="non-active" layout layout-align='space-around center'> 
            <md-button ng-click="$ctrl.widget.type = 'chart'; $ctrl.validateForm()" layout='column'  ng-class="{selIcon : $ctrl.widget.type == 'chart'}">
                <md-icon md-menu-align-target md-svg-src="trending-up"></md-icon>
                <label>{{'LABELS.CHART' | translate}}</label>
            </md-button>
            <md-button ng-click="$ctrl.widget.type = 'card';$ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'card'}">
                <md-icon md-menu-align-target md-svg-src="info-white"></md-icon>
                {{'LABELS.CARD' | translate}}
            </md-button>

            <md-button ng-click="$ctrl.widget.type = 'currentValue'; $ctrl.validateForm()" layout='column' ng-class="{selIcon : $ctrl.widget.type == 'currentValue'}">
                <md-icon md-menu-align-target md-svg-src="filter2"></md-icon>
                {{'LABELS.CURRENTVAL' | translate}}
            </md-button>
        </div>

   ///csss

       .selIcon {
           background: #91a865;
        }
      .non-active{

      .md-active-button:hover{
       background-color: #91a865;
       }

      }

as you can see, my button when clicked is set to green not by md-raised but by simple css (.selIcon { background: #91a865; }) . The only problem is I want to remove the hover effect to gray color. once the button is clicked and turned green when I hover it's going to gray. How do I disable this feature? also, can I wrap it inside a div so the hover disable only affect this particular button

回答1:

You only need to target the class of the md-button element which is .md-button and change the background-color using css. md-button element of angular material by default has the grey background color. Here is a working plunker

来源：https://stackoverflow.com/questions/44933188/angular-material-md-button-hover-color-change