Background icon color - already clicked

Ionic Framework ionic-v3
1

I´ve defined this styles in a scss to change the style of the bar-buttons. When i enter the view my bar buttons appear by default with white and with hover they appear with #BDBDBD;

.bar-button:hover {

  color: #BDBDBD;

}

.bar-button {

  color: white;

}

The problem is that some times i need to change the behaviour of only one button in the toolbar and i dont know how to do it.

This would be and example of the bar button:

<button ion-button   (click)="registerFavorite()">
        <ion-icon name="star"></ion-icon> 
      </button>

This button is for registering that a view is a favorite view. So after registering a favorite view if i return to the view i need to show to the user that the view is already registered like a favorite view. To achieve that i need to change the default background color to #BDBDBD. And finally when i click to white again to show that the view now is not registered like a favorite one.

This effect would be like if the button when you enter a favorite registered view is already clicked. I don´t know if i have to define another custom style or if i can do this effect programmatically.

Tx in advance.

1 Like