How I can bind background color of ion-button in ionic 4

Question

I need dynamic colored button in ionic4. This is my code, but not working

<ion-button [style.--background]="colorVarialble">Buttton</ion-button>

Solution 1

You can do by following way

IONIC 4

  <ion-button style="--background:red">Red</ion-button> // replace your color

IONIC 3

<button ion-button [ngStyle]="{'background-color':'red'}">Butttons</button> //replace your color

Live Demo in v3

Solution 2

You can use like this:

variables.css

 --ion-color-btn: #ef5365;

create class in your home.page.scss

.btncolor {
  --background: var(--ion-color-btn);
}

and after add class in your button:

<ion-button shape="round" class="btncolor">
  Get Started
</ion-button>

hope it help you :)

Solution 3

You could also just do it like this:

ion-button {
--background: #e95e28;
}

Comments

[Admin]

Thanks for your help, In my case, the colorVarialble is dynamic, is not Countable. for example, '#000011', '#992233', etc.

[Admin]

I need use variable instead red

[Arj 1411]

Hi i have given color="<name>", it works fine. But when I click on the button it becomes white in color( has focus on it). When I tap outside it goes back to normal button.

[eDriven_Levar]

This isn't dynamic