Changing hover of Add to Cart and Buy it Now buttons

Solved
tapi-oca
Explorer
52 3 8

Hello! I recently added the Buy it Now option to my store and the hover stopped working for the button. 

Here's what I have: 

.product-form__cart-submit:hover {
background-color: #F7BB8E !important;
}

.shopify-cleanslate ._3G6VJhJYno-AX3-X38f1TA:hover {
background-color: #F7BB8E !important;
}

How can I make it so both buttons are black with white text and hover change to the orange colour #F7BB8E ?

My website is shop-punico.com

Thanks in advance!

0 Likes
suyash1
Shopify Partner
2004 206 305

@tapi-oca - add following css to the very end of theme.css file

.product-form__cart-submit{color: #fff;}

.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
    background-color: #F7BB8E !important;
}

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
tapi-oca
Explorer
52 3 8

Screen Shot 2021-01-15 at 10.13.47 PM.png

 

Thanks for helping! Not sure what happened, but the first time I entered your code, it worked only for the BUY NOW and the ADD TO CART hover changed to white.

I re-entered the code and now it looks like this and I'm not sure where the Buy with GPay came from but it's done this to me when I re-entered the same code before.


I also noticed that the BUY NOW button loads slower than the rest of the page/the ADD TO CART BUTTON, do you know why this may be?

0 Likes
suyash1
Shopify Partner
2004 206 305

@tapi-oca - not sure why but now button loads slowly.... but if code not working properly then can you add me to staff? I will check it

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
tapi-oca
Explorer
52 3 8

Just sent an invitation. Thanks for your help!

0 Likes
suyash1
Shopify Partner
2004 206 305

@tapi-oca - please check add to cart button, you can send me email on my email address for quick communication

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes
tapi-oca
Explorer
52 3 8

Add to Cart looks good but could we make the border also hover orange?

 

For the second pay button "BUY NOW / Buy with GPay", can we make it look the same as the Add to Cart (same text with uppercase and font, rounded corners, and same hover)?

 

Thank you again!

0 Likes
suyash1
Shopify Partner
2004 206 305

This is an accepted solution.

@tapi-oca - both buttons have very same css, border too made orange

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
tapi-oca
Explorer
52 3 8

Thank you so much!! I really appreciate your fast response and how you easily solved it  

0 Likes
suyash1
Shopify Partner
2004 206 305
welcome.
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly

My timezone is GMT+5:30
0 Likes