Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
@tapi-oca - both buttons have very same css, border too made orange
@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;
}
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?
@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
Just sent an invitation. Thanks for your help!
@tapi-oca - please check add to cart button, you can send me email on my email address for quick communication
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!
This is an accepted solution.
@tapi-oca - both buttons have very same css, border too made orange
Thank you so much!! I really appreciate your fast response and how you easily solved it 🙂
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
@mario87 - can you please share site link, which button do you want to change on hover?
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
@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;
}
thanks bro! it works
@mario87 - welcome, do like the css message, it helps to find others too.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024