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

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!

1 post - 1 participant

Read full topic