Changing hover of Add to Cart and Buy it Now buttons

Store Design
1

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!

2

@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;
}
3

Screen Shot 2021-01-15 at 10.13.47 PM.png
Screen Shot 2021-01-15 at 10.13.47 PM.png1104×320 12.7 KB

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?

4

@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

5

Just sent an invitation. Thanks for your help!

6

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

7

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!

8

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

1 Like
9

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

10

welcome.

11

Hi there; i have a similar issue. i used the code but the hover color kept blue instead of the color code that i pasted. Can you help me please

thanks

12

@mario87 - can you please share site link, which button do you want to change on hover?

13

https://www.tajiriboutique.com

it want the buy it now button to change color when i hover it. i pasted the code in the theme css but it appears blue instead of pink

14

@mario87 - please add this css to the very end of your theme.css file and check

.shopify-payment-button .shopify-payment-button__button--unbranded:hover {
    background-color: #FED6DF !important;
}
1 Like
15

thanks bro! it works

16

@mario87 - welcome, do like the css message, it helps to find others too.