Trying to change colour of Add to cart button on hover

Question

I'm working on producing a WooCommerce theme, and I'm making a few style changes at the moment.

I assume this is done by just adding the new styles to the TemplateToaster style sheet, rather than editing anything in the WooCommerce plugin?

I'm currently stuck on one of the changes I'm trying to make. For some reason WooCommerce is not consistent with the colour of the "add to cart" buttons. My listed products display a red "add to cart" button, but when clicking on a product to bring up the full description, the colour of the button changes to purple!

I've managed to change the colour of the purple button to red, so as to match the other buttons, but they still change to purple when hovering a cursor over them. You can see the result I'm getting on this page -

http://internetsquad.co.uk/product/21st-century-card-trick/

 My problem is that I can't see where the style when hovering a cursor is coming from? Can anyone point me in the right direction so I can get rid of the purple!

 

Edit 25th July. I forgot to include the CSS I have added for the button. Here it is below -

.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: #D54C4D;
    color: #fff;
    margin: 5px;
}
.woocommerce .cart .button, .woocommerce .cart input.button {
    float: none;
}
 

Answer 1

Hi,

The purple color is coming on hovering the button "Add to basket". It is given in woocommerce stylesheet, that is "woocommerce.css". Just open this file and find the css given below and change it accordingly or you can override it too, by using custom css.

.woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover
{
background-color: #935386;
color: #ffffff;
}

Comments

Thanks Lisa, that did the trick! :)