Page 1 of 2

ionic4 css button text color setting

Posted: Fri Jan 03, 2020 4:49 pm
by Andy Parker

Hi, in IONIC 4, how do I change the text color of a button.

I've selected the button color as "warning" in the right hand menu, but want the text color as black.

I've tried adding some css as follows, but it takes no notice of the text color.

.teamButton_css {
text-align: center !important;
font-weight: bold !important;
color: black !important;
}


ionic4 css button text color setting

Posted: Fri Jan 03, 2020 9:41 pm
by Evgene Karachevtsev

Hello Andy,

Could you please specify if the align and weight rules work correctly and only color wasn't applied?


ionic4 css button text color setting

Posted: Sat Jan 04, 2020 8:45 am
by Andy Parker

Hi,

Yes, that's correct.

Only the colour didn't work.


ionic4 css button text color setting

Posted: Sat Jan 04, 2020 2:15 pm
by Serhii Kulibaba

Hello,

Please check the current color property. What selector is used to set it?


ionic4 css button text color setting

Posted: Sat Jan 04, 2020 5:23 pm
by Andy Parker

As I selected the "warning" colour setting, I'm presuming the following:

.ion-color-warning {
--ion-color-base: var(--ion-color-warning, #ffce00) !important;
--ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 206, 0) !important;
--ion-color-contrast: var(--ion-color-warning-contrast, #fff) !important;
--ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 255, 255, 255) !important;
--ion-color-shade: var(--ion-color-warning-shade, #e0b500) !important;
--ion-color-tint: var(--ion-color-warning-tint, #ffd31a) !important;
}


ionic4 css button text color setting

Posted: Sun Jan 05, 2020 11:22 am
by Serhii Kulibaba

I meant to check in the dev tools of your browser: https://developers.google.com/web/too...

It will help you understand what CSS selector you have to use to overwrite the current color


ionic4 css button text color setting

Posted: Sun Jan 05, 2020 1:03 pm
by Andy Parker

That was from the browser dev tools


ionic4 css button text color setting

Posted: Tue Jan 07, 2020 4:52 pm
by Andy Parker

Heres a screenshot to show that the detail I gave was from the browser dev tools.
Would be interested to know how to override these settings. Image


ionic4 css button text color setting

Posted: Thu Jan 09, 2020 5:38 pm
by Serhii Kulibaba

Thank you for details.

Please make only two changes in your app:

  1. Add a custom class to your button, e.g. myClass

  2. Add a SCSS code with this class:pre.myClass{
    --ion-color-contrast:black!important;
    }/pre


Re: ionic4 css button text color setting

Posted: Wed Mar 16, 2022 9:47 am
by felicia112

thank you!