Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
screenplayer

Changing text rollover color inside button

Question

Site URL: https://www.bhcpagroup.com/join-our-team

I have custom CSS sitewide for regular text links to rollover from burgundy to black:  #page a:hover { color: black !important;}

I'm not sure if this is causing the rollover text in the buttons to go to gray/black but whatever is the reason, it's hard to read. I'm trying to make the rollover text stay white but still keep the lesser background opacity on the rollover.

 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0
#page a:hover {
    color: #000;
}

.sqs-block-button-element--small.sqs-block-button-element {
    color: white !important;
}

 


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Can you check again?

You need to remove the !important from your code and then add in the last block that I sent.

If you want it to work on all buttons, and not just the ones set to size small, you could use this instead:

.sqs-block-button-element:hover {
    color: white !important;
}

It will not work until you remove the !important from the code that you supplied in the first post.


If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...