9

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

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

3 Answers3

10

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

ram12393
  • 1,284
  • 3
  • 14
  • 29
  • Thanks for your help, In my case, the `colorVarialble` is dynamic, **is not Countable**. for example, '#000011', '#992233', etc. –  Mar 16 '19 at 10:18
  • I need use variable instead **red** –  Mar 16 '19 at 10:23
  • Hi i have given color="", 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. – Arj 1411 Oct 14 '19 at 12:59
6

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 :)

user9088454
  • 1,076
  • 1
  • 15
  • 45
1

You could also just do it like this:

ion-button {
--background: #e95e28;
}
Sethrone
  • 31
  • 5