When trying to change the hover state of WooCommerce and many other buttons your code produces CSS like this:

body.yp-selector-hover .wc-proceed-to-checkout .checkout-button{
color:#fff !important;
}

and fails to produce the desired result.

If i change it to:

body.yp-selector-hover .wc-proceed-to-checkout .checkout-button:hover{
color:#fff !important;
}

it works fine.

It would seem your use of "body.yp-selector-hover" simply fails to apply hover css or the :hover fails to be added to the selector path.