In your GrooveKart Admin go to Settings > Pixels, Feeds, Embedded codes and click Change under Embedded Codes:


Copy & Paste the following in to the CSS Modifications box:

button.myaddtocart  {
    background: blue!important;
    border: blue!important;
}
button.myaddtocart:hover {
    background: purple!important;
}

This will change the button to blue and then purple when you hover over it:

As the color value you can use any Hex code (eg #E0FFFF) or color name taken from here: https://www.rapidtables.com/web/color/html-color-codes.html

Here's the codes for the other buttons:

Add to Cart button

/*****************
Customize Add to Cart button:
******************/

button.myaddtocart {
    background: blue!important;
    border: blue!important;
}
button.myaddtocart:hover {
    background: purple!important;
}

Proceed to Checkout 

/*****************
Customize Proceed to Checkout button:
******************/

.button_order_cart {
     background: blue!important;
    border: blue!important;
}
.button_order_cart:hover {
    background: purple!important;
}

Proceed (during checkout)

/*****************
Customize Proceed button during checkout:
******************/

.cart_navigation>button#submitAccount {
     background: purple!important;
}

Pay button

/*****************
Customize Pay button:
******************/

button#add_payment_btn {
    background: purple!important;
}
Did this answer your question?