Customize Checkout Button with Hover & Alignment

Successfully customized checkout page with the below code I found in forums, but I struggled to change the button's padding, the stroke color of a button with no fill, and to add a hover, so I ended up with this Continue text with arrow. And now I can't figure out how to align it. Would love to know how to do all the things mentioned so I could try some different options. 

Would also love to add some spacing under "Please review..." 

body#cart {
    background: #373737;
}
body#cart {
    color: white;
}
.cart-title {
    color: white;
}

body#cart {
    padding: 3rem;
}

[aria-label="Shopping Cart"]:after {
  content: 'Please review your items below:';
  font-size: 3rem;
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
}

[aria-label="Shopping Cart"] {
  visibility: hidden;
  position: relative;
}

[aria-label="Checkout"]:after {
  content: 'Continue→';
  visibility: visible;
  color: #ff00ff;
  background: none !important;
  font-size: 1.5rem;  
  padding: 0rem;
    background-color: var(--primaryButtonBackgroundColor);
}

[aria-label="Checkout"] {
  visibility: hidden;
 
}

@leeana Hi! Can you share your site URL for context? 

https://www.amandahartwellness.com/

Thank you!

What can I add to the button hover so that the fill becomes pink and border disappears? 

@Lesum You can add this code:

#cart .cart-checkout:hover {
    background: #f0f;
}