ionic4 css button text color setting

This forum contains topics that were moved from Get Satisfaction
Andy Parker
Posts: 0
Joined: Wed Mar 27, 2013 10:21 am

ionic4 css button text color setting

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

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

ionic4 css button text color setting

Post by Evgene Karachevtsev »

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

Post by Andy Parker »

Hi,

Yes, that's correct.

Only the colour didn't work.

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

ionic4 css button text color setting

Post by Serhii Kulibaba »

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

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

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

ionic4 css button text color setting

Post 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

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

ionic4 css button text color setting

Post by Andy Parker »

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

Post 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

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

ionic4 css button text color setting

Post 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

Post Reply