Button:hover stopped working

[Phreshcareco]

Hey guys, 

Website is 

www.phreshcareco.com.au

Button:hover doesn't seem to work anymore - i accidentally got automatic formatting on, not sure why but as soon as i clicked it over is started getting issues. 

This is what i use it for code below. 

 /* button hover effect */
  .button:hover {
    text-transform: uppercase;
    box-shadow: 0 0 10px #181e40 !important;
    border: 2px solid #181e40 !important;
  }
  */button hover color on product page*/ 
  
  .button#quick-add-template--22881209352507__product-grid9604785439035-submit:hover {
    background-color: #ff2800 !important;
    color: #181e40;
  }
  .button#quick-add-template--22881209352507__product-grid9641567158587-submit:hover {
    background-color: #f2f427 !important;
    color: #181e40;
  }
  .button#quick-add-template--22881209352507__product-grid9614441054523-submit:hover {
    background-color: #8fc128 !important;
    color: #181e40;
  }
  .button#quick-add-template--22881209352507__product-grid9605425594683-submit:hover {
    background-color: #08c7e4 !important;
    color: #181e40;
  }
  .button#quick-add-template--22881209352507__product-grid9641599566139-submit:hover {
    background-color: #fb6445 !important;
    color: #181e40;
  }

I am still really new to coding. Self taught from youtube/chat GPT. 

Was wondering if someone could help me out see why it is not working?

[Dan-From-Ryviu]

You can try to updat your code to this and check again

 /* button hover effect */
  button:hover {
    text-transform: uppercase;
    box-shadow: 0 0 10px #181e40 !important;
    border: 2px solid #181e40 !important;
  }
  */button hover color on product page*/ 
  
  button#quick-add-template--22881209352507__product-grid9604785439035-submit:hover {
    background-color: #ff2800 !important;
    color: #181e40;
  }
  button#quick-add-template--22881209352507__product-grid9641567158587-submit:hover {
    background-color: #f2f427 !important;
    color: #181e40;
  }
  button#quick-add-template--22881209352507__product-grid9614441054523-submit:hover {
    background-color: #8fc128 !important;
    color: #181e40;
  }
  button#quick-add-template--22881209352507__product-grid9605425594683-submit:hover {
    background-color: #08c7e4 !important;
    color: #181e40;
  }
  button#quick-add-template--22881209352507__product-grid9641599566139-submit:hover {
    background-color: #fb6445 !important;
    color: #181e40;
  }

[Phreshcareco]

Thanks for reply but unfortunately still not working...

[Nilankar]

For black dot Appearing, You can debug this yourself using the browser DevTools or by downloading and editing the theme in VS Code. Use VS Code’s search functionality to locate the issue.

If you have a backup of the theme and the current theme, uploading it to GitHub can help compare changes and identify what went wrong.

[Phreshcareco]

Hey @Nilankar,

Ive searched the dev tool i cant find anything. I am not too concerned about the dot, my main concern is why the button.hover css just suddenly stopped working.
Got any ideas?

[LizHoang]

Hi @Phreshcareco You can try this code 

 /* button hover effect */
    text-transform: uppercase;
    box-shadow: 0 0 10px #181e40 !important;
    border: 2px solid #181e40 !important;
    background-color: #ff2800 !important;
    color: #181e40;
  }

Result 

Best,

Liz

[Phreshcareco]

Thanks for reply but need all the buttons to have different colours and this wont fix why there is no hover over button. 

[TheUntechnickle]

Hey @Phreshcareco,

I see the issue! Try this: 

/* General button hover effect */
.button--primary:hover,
button.button--primary:hover,
.quick-add__submit:hover {
  text-transform: uppercase;
  box-shadow: 0 0 10px #181e40 !important;
  border: 2px solid #181e40 !important;
}

/* Button hover color on product page - Fruit Fusion (red) */
button[id*="9604785439035-submit"]:hover {
  background-color: #ff2800 !important;
  color: #181e40 !important;
}

/* Button hover color on product page - Good Stuff (yellow) */
button[id*="9641567158587-submit"]:hover {
  background-color: #f2f427 !important;
  color: #181e40 !important;
}

/* Button hover color on product page - Secret Weapon (green) */
button[id*="9614441054523-submit"]:hover {
  background-color: #8fc128 !important;
  color: #181e40 !important;
}

/* Button hover color on product page - Steel Eye (blue) */
button[id*="9605425594683-submit"]:hover {
  background-color: #08c7e4 !important;
  color: #181e40 !important;
}

/* Button hover color on product page - Alpha Phresh (orange) */
button[id*="9641599566139-submit"]:hover {
  background-color: #fb6445 !important;
  color: #181e40 !important;
}

The key changes I've made:

1. The main issue was that you were using selectors like .button#quick-add-... when the elements are actually <button> elements with the class .quick-add__submit and class .button--primary
2. I've made the selectors more robust by using attribute selectors with a wildcard ([id*="9604785439035-submit"]). This targets any button with an ID containing those product numbers, which will be more resilient to theme updates or changes.
3. I've added comments to identify which product each color corresponds to, making it easier to manage in the future.
4. I've kept the general hover effect for all buttons that should apply universally, while the specific color changes are applied to individual products.

Feel free to reach out in case you've any more questions for me 🙂

Cheers!
Shubham | Untechnickle

[Phreshcareco]

@TheUntechnickle  Thank-you for your code - but unfortunately that still did not work. I was so hopeful about it, was written out so nicely. I do appreciate it. But do you think theres anything else that could be compromising it? 

[TheUntechnickle]

The very first code that you've written, I can see the error. The comment is formatted wrong, instead of this

*/button hover color on product page*/

Use this:
/* button hover color on product page */

That might be causing all the conflict! Let me know if this works, else you can share your collaborator code we'd love to dig deep and fix it for free 🙂

Cheers!
Shubham | Untechnickle

[TheUntechnickle]

That's the updated code:

/* button hover effect */
.button:hover {
  text-transform: uppercase;
  box-shadow: 0 0 10px #181e40 !important;
  border: 2px solid #181e40 !important;
}

/* button hover color on product page */ 
.button#quick-add-template--22881209352507__product-grid9604785439035-submit:hover {
  background-color: #ff2800 !important;
  color: #181e40 !important;
}

.button#quick-add-template--22881209352507__product-grid9641567158587-submit:hover {
  background-color: #f2f427 !important;
  color: #181e40 !important;
}

.button#quick-add-template--22881209352507__product-grid9614441054523-submit:hover {
  background-color: #8fc128 !important;
  color: #181e40 !important;
}

.button#quick-add-template--22881209352507__product-grid9605425594683-submit:hover {
  background-color: #08c7e4 !important;
  color: #181e40 !important;
}

.button#quick-add-template--22881209352507__product-grid9641599566139-submit:hover {
  background-color: #fb6445 !important;
  color: #181e40 !important;
}

[dreamtechzone_5]

Please help me, Sir. Thank you. 

https://community.shopify.com/c/shopify-design/newsletter-form-issue-in-footer-section-dawn-theme/m-...