Requires csp policy to allow "data:" because of the two background-image urls used for hover and active buttons.

Sweetalert2 is great, but it uses some background-image data URLs to darken the button backgrounds on hover and when active:

.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:hover {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNikAQAACIAHF/uBd8AAAAASUVORK5CYII="); }
.swal2-popup .swal2-actions:not(.swal2-loading) .swal2-styled:active {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiMAYAADwANpiOMBYAAAAASUVORK5CYII="); }

The upshot of this is that it requires the contentSecurityPolicy header to explicitly allow data: for the img-src policy. Is there any chance you would consider implementing a different way of darkening the images? I am worried about the implications of allowing data: for the img-src policy, for instance:

https://security.stackexchange.com/questions/94993/is-including-the-data-scheme-in-your-content-security-policy-safe/95011#95011

Maybe I am being too paranoid but wanted to raise the issue that using sweetalert2 requires a potential change to the content security policy header.

[acupofjose]

Thoughts?

.swal2-popup button.swal2-styled {
  position: relative;
}

.swal2-popup button.swal2-styled:hover:after,
.swal2-popup button.swal2-styled:active:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.15);
}

Demo: https://jsfiddle.net/kxxc7kxh/1/

[szm1]

No worries, thanks for fixing! Awesome!