Ionic button text color

Ionic Framework
1 
<ion-button class="next-btn" color="secondary" shape="round" expand="block" >
          NEXT
        </ion-button>



.next-btn{
    --color: var(--ion-color-light);
  }

this is my HTML and CSS. color of the button text is not changing, when I give color property to the button. but if I remove the color property the text color will change.

why is that not working when i give color property for the button?

2

It’s because you are using the color property too which overrides the custom CSS. If you want to use both, you can do the following:

.next-btn::part(native) {
    --ion-color-contrast: var(--ion-color-light);
}
3

@twestrick thanks for the solution

1 Like