Customizing the buy button: diffent font, hover and toggle image

[Claire16]

Hi there, 

I hope someone is able to help me with the following, I've been stuck on it for several days... 

I have my own website domain and use the Shopify Buy Button. I would like to customize the buy button to match my website's branding by: 

1. changing the font of the buy button to a paid font (accessible on my website)
2. changing the hover of the buy button to a moving underline (here is the code I am using for it, already implemented on my website: https://paulund.co.uk/css-animation-link-underline
3. changing the image from the toggle, from a shopping cart to a bag

For 1&2, I think the easiest would be to link the current button I have created on the website and simply linking it to the shopify buy button. (see screenshot attached) 

Any help would be super appreciated!!! 

Code attached (orange is the shopify code, yellow is the website button code, I would like the shopify button to be):