Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

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;
}

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

ionic4 css button text color setting

Hello Andy,

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

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

Hi,

Yes, that's correct.

Only the colour didn't work.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

ionic4 css button text color setting

Hello,

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

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

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;
}

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

ionic4 css button text color setting

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

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

That was from the browser dev tools

Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

ionic4 css button text color setting

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

Return to “Issues”