Skip to content

Instantly share code, notes, and snippets.

@odessy
Created July 26, 2025 19:30
Show Gist options
  • Save odessy/1cb3a1f4cf337e213a6d2d7d64168957 to your computer and use it in GitHub Desktop.
Save odessy/1cb3a1f4cf337e213a6d2d7d64168957 to your computer and use it in GitHub Desktop.
Story add to cart custom colors based on https://odessy.github.io/README.html#1
/* CSS - change Add to Cart button color */
.product__form--buybutton .product__submit__add {
background-color: var(--primary);
border: 1px solid var(--primary);
color: var(--primary-opposite);
}
.product__form--buybutton .product__submit__add:hover,
.product__form--buybutton .product__submit__add:focus {
background-color: var(--primary-hover);
border: 1px solid var(--primary-hover);
color: var(--primary-opposite);
}
/* Change loading and complete state colors */
.btn-state-loading .svg-loader circle,
.btn-state-loading .svg-loader circle~circle{
stroke: var(--primary-opposite);
}
.btn-state-complete{
border-left: 2px solid var(--primary-opposite);
border-bottom: 2px solid var(--primary-opposite);
}
/* - end - */
/* CSS - custom colors Add to Cart button
--primary - the background color
--primary-hover - the hover background color
--primary-opposite - the text color
*/
.product__form--buybutton .product__submit__add{
--primary: #444444;
--primary-hover: #111111;
--primary-opposite: #ffffff;
}
/* - end - */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment