How to change color of "Add to Cart" button when hovered over the products?

  • I use version 2.3.3. I noticed there are 3 color changes to “add to cart” button.

    1. While a product is not hovered, the button is usual ash color.

    2. When mouse is hovered on the product, add to cart button becomes light blue.

    3. When mouse is hovered on the button, it becomes pink which is the primary color of theme.

    I want to change button color to something else in the stage 2. How can I do that?

    I have provided examples of 3 stages that color differs.

    https://rayancooper23.tumblr.com/post/108162867441/1-ash-mouse-is-not-hovered-2-light-blue

Viewing 4 replies - 1 through 4 (of 4 total)
  • hannah

    (@hannahritner)

    Hey, pretty sure you can change it with this css:

    .product_item:hover .kad_add_to_cart {
background: #333;
}

    Just paste that in your custom css box in theme options > advanced settings.

    Hannah

    Thread Starter Madura11

    (@madura11)

    It works, thanks a lot! ??

    Thread Starter Madura11

    (@madura11)

    Hey,

    I got on to another problem. When the exact product page is loaded the “Add to Cart” button is in pink color. But when mouse is hovered over it becomes light blue which is not matching with overall theme. How can I change this color? And is it possible to load the exact product page with having add to cart button in different color too?

    Madura11, in your theme options > basic styling. Do you have pink selected for your primary color and your 30% lighter primary color?

    It’s important to set both.

    Kadence Themes

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to change color of "Add to Cart" button when hovered over the products?’ is closed to new replies.