change the text color of ion-button - ionic-framework

Question

As per question, how can I change the color of the text inside ion-button? Here's the code for my button
<button ion-button block (click) = "submitForm()">Submit</button>
I've tried various methods like below
<button ion-button block (click) = "submitForm()"><sub ion-text color = "light">Submit</sub></button>
<button ion-button block (click) = "submitForm()" ion-text color = "light">Submit</button>
<button ion-button block (click) = "submitForm()"><span ion-text color = "light">Submit</span></button>
<button ion-button block (click) = "submitForm()" class= "font-white">Submit</button>
where in the last example above I put in .font-white{color: #fff !important;} inside app.scss
but nothing works.

Answer 1

Just replace the style attribute from button give class name and then in your app.scss but below code(assume u give class name as font-white)
.font-white
{
color : #fff !important;
}

Answer 2

Modify your component.html and component.scss file in following way,
<button ion-button block (click)="submitForm()" class="custom-button">Submit</button>
In your component.scss,
.custom-button{
color: #000;
}

Answer 3

This is working fine in ionic-4:-
<button ion-button block class="font-white">Submit</button>
In appcomponent.scss
.font-white {
color: #fff;
}
For Ionic-5:-
<ion-button class="font-white">Submit</ion-button>
in scss file
.font-white {
--color: #fff;
}

Answer 4

if you want white color only then do not create any of scss class
just write
<ion-button fill="clear" class="text-white" (click)="btnClickFN()">
save
</ion-button>
else if you want to give custom color then please make class in .scss
it will apply on all the tag where you wrote <ion-button></ion-button> tag
ion-button{
color: #00FF00; // green color
}
else you can give color only in specific one button then please create customclass like below in file of
.sccs
.btnColor{
color: #00FF00; // Green color
}
in .html file::
just put class inside <ion-button> tag and give name as u give in .scss file
<ion-button fill="clear" class="btnColor" (click)="btnClickFN()">
save
</ion-button>