Make button colour invert on hover and click

Technical Q&A
1

I am trying to make every button in my store invert colours, but keep the original button colour as a border when either hovered over or pressed on both desktop and mobile.

Store link: https://mauriciobenyar.myshopify.com/

Theme: Dawn 12.0.0

Would appreciate any help

Thanks in advance

2

Redoing EVERY button style is beyond the scope of small forum post.

If you need this customization for every button then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Here’s an example for the add-to-cart buttons using a custom-css setting, you may need to add !important to the CSS declarations:

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.product-form__submit:hover {
  --button-width: 120px;
  --button-color: #000000;
  --button-bg: #ffffff;
  --button-color-hover: #ffffff;
  --button-bg-hover: #303030;
  --button-font-size: 11.05px;
  --button-font-size-desktop: 13px;
  --border-radius: 0px;
  --border: 0px #121212 solid;
  background-color: rgba(var(--button-bg), var(--alpha-button-background));
  color: rgb(var(--button-color));
}
3

I didn’t realise it was a big task to be honest, assumed there was a way to group all buttons and set parameters for them in a few lines. Thanks anyways

4

Generally for scoping effort if a theme doesn’t already have setting for it, words like EVERY implies a lot of vague work vs being specific: “all product page add to cart buttons”.

5

I tried the code and it works perfectly, could I just repeat this for every button by just listing the classes at the start?