Change Hover Colour on Buttons and Images on Broadcast Theme

[SUNSEASOL]

There is no option on Broadcast theme colors to change the hover colour on both buttons and images throughout my website.

The only option is to code. I spoke to an advisor but was confused by what I had to do. 

Shopify Advisor said to:

1. Look for a file named [theme.scss.liquid] or [styles.scss.liquid]

2. dd the following CSS at the bottom of the file to change the hover colors for buttons and images:

   .button-class:hover, .image-class:hover { color: #FFFFFF; /* Changes text color on hover / background-color: #FABD60; / Changes background color on hover */ }

   Note: Replace .button-class and .image-class with the actual CSS classes used in your theme for buttons and images. If you're not sure, I can help you find these.

I don't understand what button-class and image-class is?

Please advise what to do?

[Moeed]

Hey @SUNSEASOL 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[SUNSEASOL]

hey i don't think it's password protected : https://madsunsea.myshopify.com/

[Moeed]

Hey @SUNSEASOL 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.btn--large:hover {
    color: black !important;
    --btn-bg-hover: white !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[niraj_patel]

Hello @SUNSEASOL 
Can you share store URL?

[SUNSEASOL]

hey i dont think it's password protected : https://madsunsea.myshopify.com/

[Made4uo-Ribe]

Hi @SUNSEASOL 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

Loacte the Asset folder and look for the file theme.css. 

Open the file and look the code Or ctrl F to find same selector the one colored blue in the picture below. 

Now change the --btn-bg-hover:  to color you like to use. 

Example. 

And Save. 

Result:

Note: this will change all the hover color in the store. Also, I just like to clarify about the image. Background hover on Image? Some f your image zoom when hover but most of it dont change at all when hover.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!