CODEWITHSUNDEEP
htmlcssionic3
Riddhi Shah
Riddhi Shah

Reputation: 3122

How to change Ionic Button text color

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.

Upvotes: 6

Views: 17171

Answers (4)

BorisD
BorisD

Reputation: 1814

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...

Upvotes: 4

komara
komara

Reputation: 382

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

Upvotes: 5

Prashant
Prashant

Reputation: 1385

If you want to change color through whole application, then I would suggest you to override text-color variable to your src/theme/variables.scss 

$button-md-text-color: #ColorCode
$button-ios-text-color: #ColorCode

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

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>

Upvotes: 5

Related Questions