Button Hover State (Interactivity)

Does anyone know if it is possible to change the "Learn more" button active (hover)-state to red background with white text?
I want to maintain inactive-state as-is.

Thank you!

59 minutes ago, dalewis123 said:

Does anyone know if it is possible to change the "Learn more" button active (hover)-state to red background with white text?
I want to maintain inactive-state as-is.

Thank you!

 

Could you share site url

1 hour ago, bangank36 said:

Could you share site url

It is https://cymbals-chartreuse-k3cr.squarespace.com

48 minutes ago, dalewis123 said:

It is https://cymbals-chartreuse-k3cr.squarespace.com

YOur site is private, please enable a site wide password and let us know

9 minutes ago, bangank36 said:

YOur site is private, please enable a site wide password and let us know

bannertest1

Thank you!

16 minutes ago, dalewis123 said:

bannertest1

Thank you!

it incorrect

13 hours ago, bangank36 said:

it incorrect

updated/confirmed: bannertest1

Thank you!

Add the following to Design > Custom CSS.

@media ( hover : hover) {

  .primary-button-style-outline .sqs-block-button-element--small:hover,
  .primary-button-style-outline .black .sqs-block-button-element--small:hover {

    background-color : red !important;
    color : white !important;
    
    }
  }

Let us know how it goes.

@creedon, it only worked on the first of five buttons on the page. Any thoughts?

Thank you.

I updated my code post. Now the effect is site wide.

My new code is not installed. If you see "#block-yui_3_17_2_1_1612027194194_6705" in the code. It is the old code. Also be sure to remove the old code.

Thank you. Please bear with me, as I am not code-literate.

OK that worked for all black sections, but not in the white section

Can this be solved? Apologies for all of the back and forth. Thank you again!

No worries. Let's try this again. Updated my code. Sometimes the code works great here but doesn't do the job in the actual environment.

Quote

Same outcome. to confirm, is this the updated code?:

My bad. The new code will have the added text "!important" at the end of some of the lines. Scroll back up and copy and paste again please.

Ah. In the Digital white section correct?

Yes.

OK. Please give the latest version a try! 😀

No dice. Now everything went back to how it was originally without the red. LOL. Kinda 🙂

The latest code is not installed. Also you've dropped an at sign (@) from the beginning of the code.

Bingo! My bad. Thanks so much!

I do have one more question (not urgent): can the drop down menu in my navigation (Services) have a red background?

Also, please lmk you require any payment. I don't want to take advantage of your generosity.

Quote

can the drop down menu in my navigation (Services) have a red background?

Add the following to Design > Custom CSS, after the code that is already there separated by a blank line.

body[data-menu-overlay-theme-switcher="true"]:not( .header--menu-open ) .black .header-nav-folder-content {

  background-color : red;
  
  }

Let us know how it goes.

Brilliant! Thank you so much! Be well.