SweetAlert - Change Color of Button

Question

I'm trying to change the color of the cancel button like I can for the confirm button but it doesn't seem to work for some reason.

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    cancelButtonColor: "#DD6B55",
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function (isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
});

Answer 1

You are using this version of SweetAlert: https://github.com/t4t5/sweetalert and in the source JS file (https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js), there is no such parameter to change color of cancel button.

In the file you have used, the params are:

var defaultParams = {   title: '',   text: '',   type: null,   allowOutsideClick: false,   showConfirmButton: true,   showCancelButton: false,   closeOnConfirm: true,   closeOnCancel: true,   confirmButtonText: 'OK',   confirmButtonColor: '#8CD4F5',   cancelButtonText: 'Cancel',   imageUrl: null,   imageSize: null,   timer: null,   customClass: '',   html: false,   animation: true,   allowEscapeKey: true,   inputType: 'text',   inputPlaceholder: '',   inputValue: '',   showLoaderOnConfirm: false }; 

May I suggest you to use this version of SweetAlert: https://github.com/limonte/sweetalert2 as here the option to change the cancel button color is present.

You can modify the source code of the first JS file, however in the second version it is readily available.

There is always the option available to use CSS to modify button colors. But if you want to make it customizable using JS, then SweetAlert2 is a better alternative.

Answer 2

[update => hover option]

Maybe it'll help someone who use 2nd version
https://sweetalert.js.org/guides/#installation

Javascript

swal({
    title: "Apakah anda yakin?",
    text: "Anda dapat mengaktifkannya lagi nanti...",
    icon: "warning",
    buttons: {
        confirm : {text:'Ubah',className:'sweet-warning'},
        cancel : 'Batalkan'
    },
}).then((will)=>{
    if(will){
        $(".onoffswitch-checkbox").prop('checked',false);
    }else{
        $("#all_petugas").click();
    }
});

CSS

...
.sweet-warning{
 background-color: black;
 #or anything you wanna do with the button
}

.sweet-warning:not([disabled]):hover{
 #hover here
}
...