Move 'add to cart' button to be right-aligned with my site and remove animation once clicked

Site URL: https://elk-drum-5kzr.squarespace.com/

Hi all, I'd like to move my 'add to cart' button to be right-aligned with my site. 
I've also added some custom CSS to change the look of the button, and some of that goes away once you click on it and it does it's animation to show "added to cart".

I'd like to remove the animation so it just says 'added to cart' once you click it, and keep all the styling of how it looks before you click it. And of course, move it to the right. 

Site:
https://elk-drum-5kzr.squarespace.com/
pw: livingthedream

But I'm hoping to change the domain and make it live tomorrow morning. If I don't hear back before then I can post the new link. 

Thank you!

Marissa

Try adding to Design > Custom CSS

.pdp-layout .pdp-details .sqs-add-to-cart-button-wrapper {
    float: right;
}

Thank you! 

When you click on 'add to cart' it does a goofy animation where it says 'adding...' and then changes to "added to cart". When it does this it loses the custom css I added to the original button which is this:

/*Add to cart: Remove button padding*/
.sqs-add-to-cart-button {
    padding: 0px !important;
    min-height: 35px !important;
    letter-spacing: 0em !important;
}

/*Add to cart: Button hover styling*/
.sqs-add-to-cart-button:hover {
  opacity: 1 !important;
  border-bottom: 4px dotted !important;
  color: #100FOF !important;
}

I'd like to remove the animation so it just says 'added to cart' once you click it, and keep all the styling of how it looks before you click it.

Try adding this code

.sqs-add-to-cart-button-inner {
    border-bottom: 4px solid black;
}
.sqs-add-to-cart-button-inner:hover {
    border-bottom-style: dotted;
}
.pdp-layout .pdp-details .sqs-add-to-cart-button {
    border: none !important;
}

Wonderful, thank you!