How to change the color of a focused/pressed button in Sweet Alert 2?

Question

For a Sweet Alert 2 pop-up confirmation window, if I set the attribute "allowEnterKey" to true, which is the default, then the confirmation button is focused automatically when the window pops up. Also, this button's color will be different than its regular color (e.g. the color when it is not focused or pressed)

On the other hand, if I set "allowEnterKey" to false, then this button will not be highlighted and the color will be its regular color. But the users will not be able to close the window by pressing the Enter key, which is not ideal for me.

So, how can I change the color of the button to its regular color when it is focused?

A sample pop-up confirmation window, where the button is highlighted and grey instead of its regular color blue

Answer 1

The documentation specifies color options: confirmButtonColor and cancelButtonColor.

swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

If that isn't sufficient, you can also apply custom CSS classes, e.g.:

confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',