Impulse - Add to Cart - Hover colour

[meld78]

I want to change the hover colour on the add to cart button and have the below code added to theme.css.liquid but it's not changing the hover color.

Screenshot below is showing the hover color (slight variation to regular add to cart button) 

can someone please assist?

Thank you

/* Custom styles for the "Add to Cart" button */
.btn.add-to-cart {
background-color: #cf6a00; /* Normal button color */
color: white; /* Normal text color */
border: none; /* Normal border */
padding: 10px 20px; /* Button padding */
text-align: center; /* Center text */
text-decoration: none; /* Remove underline */
display: inline-block; /* Inline-block display */
font-size: 16px; /* Font size */
margin: 4px 2px; /* Margin */
cursor: pointer; /* Pointer cursor */
transition: background-color 0.3s ease; /* Smooth transition */
}

.btn.add-to-cart:hover {
background-color: #5a553d; /* Hover button color */
color: #ffffff; /* Hover text color */
border: none; /* Hover border */
}

[niraj_patel]

Hello @meld78 

Can you share store URL?

[meld78]

sure can @niraj_patel  https://www.outbacklinen.co/ 

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.product-block button.btn.btn--full.add-to-cart:hover{
background: #5a553d !important;
color: #ffffff !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[meld78]

amazing, that worked, thanks so much @niraj_patel ! Would you also be able to help me do the same for the checkout button?

[niraj_patel]

You can see that when you hover over the button the CSS property is being applied.

Was your question answered? Mark it as an Accepted Solution.

[meld78]

hm, strange, I'm using an incognito window and it's still showing me the other shade of orange

[niraj_patel]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
button.btn.cart__checkout.preOrderCheckout:hover{
background: #5a553d !important;
color: #ffffff !important;
}
</style>

Please
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

.btn.add-to-cart:hover {
background: #000 !important;
}