Solved

Changing hover of Add to Cart and Buy it Now buttons

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!

Accepted Solution (1)
suyash1
Shopify Partner
9080 1129 1479

This is an accepted solution.

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 15 (15)

suyash1
Shopify Partner
9080 1129 1479

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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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?

suyash1
Shopify Partner
9080 1129 1479

@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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
tapi-oca
Explorer
52 3 8

Just sent an invitation. Thanks for your help!

suyash1
Shopify Partner
9080 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
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!

suyash1
Shopify Partner
9080 1129 1479

This is an accepted solution.

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
tapi-oca
Explorer
52 3 8

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

suyash1
Shopify Partner
9080 1129 1479
welcome.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
mario87
Visitor
3 0 0

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

suyash1
Shopify Partner
9080 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
mario87
Visitor
3 0 0

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 

suyash1
Shopify Partner
9080 1129 1479

@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;
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
mario87
Visitor
3 0 0

thanks bro! it works

suyash1
Shopify Partner
9080 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI