Make button colour invert on hover and click

Solved

Make button colour invert on hover and click

tobyh4
Excursionist
30 0 5

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

Accepted Solution (1)

PaulNewton
Shopify Partner
6422 585 1363

This is an accepted solution.

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));
}

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


View solution in original post

Replies 4 (4)

PaulNewton
Shopify Partner
6422 585 1363

This is an accepted solution.

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));
}

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


tobyh4
Excursionist
30 0 5

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

PaulNewton
Shopify Partner
6422 585 1363

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".

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


tobyh4
Excursionist
30 0 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?