How to change Ionic Button text color

Question

It may be silly question but I am not much familiar with ionic and css, so Can any one tell me how to change text color of the ionic button?

<div class="bottom-button" margin text-center>
     <button ion-button color="energized">
       Register
     </button>
</div>

Here, Button color is yellow and text color is black. I want to change text color to white.

Solution 1

fix your code with style

    <div class="bottom-button" margin text-center>
         <button ion-button style="color:red">
           Register
         </button>
    </div>

OR use css:

button{
color:red
}

<div class="bottom-button" margin text-center>
     <button ion-button>
       Register
     </button>
</div>

Solution 2

In ionic-4 button text color will be color-contrast which in defined variables.scss file.

you can simple change your button color as well as button text color by creating your own color.

in your .html file

<ion-button class="loginButton" color="bgColor"  shape="round" id="loginButton (click)="loginAction()">

and in your src -> theme -> variables.scss

--ion-color-bgColor: #1c1c1c;
--ion-color-bgColor-rgb: 28, 28, 28;
--ion-color-bgColor-contrast: #ffffff;
--ion-color-bgColor-contrast-rgb: 255, 255, 255;
--ion-color-bgColor-shade: #414040;
--ion-color-bgColor-tint: #050404;

  .ion-color-bgColor {
--ion-color-base: var(--ion-color-bgColor) !important;
--ion-color-base-rgb: var(--ion-color-bgColor-rgb) !important;
--ion-color-contrast: var(--ion-color-bgColor-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-bgColor-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-bgColor-shade) !important;
--ion-color-tint: var(--ion-color-bgColor-tint) !important;
}

Solution 3

Using ion-button with color set as primary :

<ion-button color="primary">Save</ion-button>

change the following in theme/variables.scss :

--ion-color-primary-contrast: #edce12;
--ion-color-primary-contrast-rgb: 237 ,206 ,18;

You can also set as secondary, tertiary...

Comments

[לבני מלכה]

tell for more help

[Riddhi]

No, I want it for a single button only.