Why can't I change the hover color for Ionic button

Ionic Framework Ionic React
1

I tried to change the color of the text of an IonButton(fill: clear) when it hovers but it didn’t respond.
What I did was adding this code to the variables.css file:

ion-button {
  --color-hover: blue;
}

And I also tried adding CSS code in two ways

  • 1st attempt:
.nav-button{
  --color-hover: blue !important;
}
  • 2nd attempt:
.nav-button:hover{
  color: blue !important;
}

But all didn’t work. However, when I changed its background color using the CSS code, it worked:

.nav-button:hover{
  background-color: blue !important;
}

Here is the code of the button:

<IonRow class="ion-padding-end" slot="end">
          <IonButton fill="clear" class="nav-button" href="/about">About</IonButton>
          <IonButton fill="clear" class="nav-button" href="/posts">Posts</IonButton>
</IonRow>

Any help would be appreciated. Thank you!

2

I took a look at the project, but wasn’t able to recreate your issues.

Here is a sample, please let me know if it’s close to what you have and if it works.

3

Thank you for sharing the demo! I tried as you suggested but the ones in the tool bar still not working.
My code looks like this:

<IonToolbar>
        <IonRow class="ion-padding-end" slot="end">
          <IonButton fill="clear" class="nav-button">
            About
        </IonButton>
          <IonButton fill="clear" class="nav-button">
            Posts
          </IonButton>
        </IonRow>
        <IonTitle class="ion-padding-start">Title</IonTitle>
      </IonToolbar>

Please let me know if there is some other ways that I should try out!

Thanks in advance!