Button State colors

Shapely
1

Hi,

How do I change the default and .hover colors of the woocommerce and all other buttons on my website.

regards,
Shahidul

2

Website Page

3

Hi Shahidul,

Thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

#page .btn-filled:hover, #page .btn:visited:hover, #page .btn:hover {
    background: #d78647;
    border-color: #d78647;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

4

Hi Movin,

Worked great.

Thanks

5

Hi Movin,

I’ve had a look through and it seems the code is not working 100%. It is not affecting the add to cart button on all product pages.

6

Example

7

Please use the below CSS code instead to make it work on that page.


#page .btn-filled:hover, 
#page .btn:visited:hover, 
#page .btn:hover,
#page button:hover {
    background: #d78647 !important;
    border-color: #d78647 !important;
}
8

Hi Movin,

Thank you.

9

You are most welcome here :slight_smile: