Change colour of 'Add to Cart button when hovering - Ride theme

[nickadl]

Hi,

How can I change the colour of my 'add to cart' and 'quick add' button when hovering over them? I would like this to be colour #0b1215.

My theme is RIDE.

Cheers, Nick

[Asad-Mahmood]

What's your store url?

[BSS-TekLabs · Accepted solution]

Hi @nickadl,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

button.button.quick-add__submit:hover,
button.button.product-form__submit:hover {
    background: #352f36;
}
/* This code updates the borders of the button */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .animate--hover-vertical-lift .quick-add__submit:not([disabled]):hover:after,
    .animate--hover-vertical-lift .product-form__submit:not([disabled]):hover:after {
        box-shadow: none;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[niraj_patel]

Hello @nickadl 

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-form__buttons button.product-form__submit:hover {
      background: #0b1215;
  }
  button.quick-add__submit:hover {
      background:#0b1215;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.