How to change the color of buttons in Alert in Ionic2

user_7041306 0
Viewed 8496

Is it possible to change the color of buttons of Alert (Ok, Cancel) in Ionic2? Can we use cssClass property to give color to buttons?

.buttonCss{
    button{
        color:#e74c3c !important;
    }
}

The above code gives the same color to the both Ok and Cancel buttons like the below image enter image description here

But I need to get the following result(Both button shoulb in in different color), enter image description here

Any help is appreciated...!

Edit 1: Added showAlert() function

    showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}
ionic2 ionic3 angular typescript css
3 Answers

1) First option, just using a class for the alert, and a css style rule for each button

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

And then:

.buttonCss {

    button.alert-button:nth-child(1){
      color: red;
    }

    button.alert-button:nth-child(2){
      color: green;
    }
}

This way the first button (nth-child(1)) will be red and the second button (nth-child(2)) will be green.

2) Second option, using a class for the alert, and adding the cssClass property to each button, in order to use that custom class on each button

showAlert(title, message, yesHandler, noHandler, caller) {
    let alert = this.alertCtrl.create({
        title: title || "Please Confirm",
        message: message,
        cssClass:'buttonCss',
        buttons: [
            {
                text: 'Exit',
                cssClass: 'exit-button',
                handler: () => yesHandler(caller)
            },
            {
                text: 'Cancel',
                role: 'cancel',
                cssClass: 'cancel-button',
                handler: () => noHandler(caller)
            }
        ]
    });
    alert.present();
}

And then:

.buttonCss {

    button.alert-button.exit-button{
      color: red;
    }

    button.alert-button.cancel-button{
      color: green;
    }
}
user_39154380

You need to give each button a class, then when assigning a class to each button, you can change the colour of each individual button. Also you can add hover effects to change the colour on hover as well.

user_85479490

you have options to add custom class for button using cssClass

showAlert(title, message, yesHandler, noHandler, caller) {
let alert = this.alertCtrl.create({
    title: title || "Please Confirm",
    message: message,
    cssClass:'buttonCss',
    buttons: [
        {
            text: 'Exit',
            handler: () => yesHandler(caller)
        },
        {
            text: 'Cancel',
            cssClass: 'customClass',
            role: 'cancel',
            handler: () => noHandler(caller)
        }
    ]
});
alert.present();

}

In Css:

.customClass{
  color:#e74c3c !important;
 }
user_41888570
Related