Help with text hover :(

Site URL: https://jamesschafferart.com/

Hi!

I'm new here.

It seems that recently Squarespace got rid of the feature in their website designer where you can make text and buttons change colors when they are hovered over.

I am trying to make all of my text buttons change color from black to white when hovered over, but I can't figure out how. I know pretty much no CSS, and after browsing through the forum, it seems like that is now necessary to make these changes happen.

Please let me know if anyone has any suggestions!

Thanks!

Hi @jamesschaffer, You can add this code under Website > Pages> Website Tools > Custom CSS to transform the color from black to white on buttons, social icons, header nav links and all text links throughout the site.

/* Buttons */
#siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary {
    transition: all 0.1 ease;
}
#siteWrapper.site-wrapper .sqs-button-element--primary:hover, #siteWrapper.site-wrapper .sqs-button-element--secondary:hover, #siteWrapper.site-wrapper .sqs-button-element--tertiary:hover {
    background: #fff;
    color: #000;
}

/* Social icons */
.socialaccountlinks-v2-block .social-icons-style-border a:hover .sqs-use--icon, .social-account-links-v2-block .social-icons-style-border a:hover .sqs-use--icon {
    fill: #fff;
}
.socialaccountlinks-v2-block .social-icons-style-border a:hover, .social-account-links-v2-block .social-icons-style-border .sqs-use--icon {
    color: #fff;
}

/* Header */
#header .header-title-text a:hover {
    color: #fff;
}
#header .header-nav-item a:hover {
    color: #fff;
}
#header .header-actions .icon--fill svg:hover {
    fill: #fff;
}

/* Text Link */
a {
    transition: all 0.1s ease;
}
a:hover {
    color: #fff;
}
a:hover span {
    color: #fff;
}

Adding a hover color change to regular text (like headers and body text) that doesn’t have links can be confusing for users and may negatively impact your site’s usability. However, you can add this code to change color on non-link text:

/* Text */
h1, h2, h3, h4, p {
    transition: all 0.1s ease;
}

h1:hover, h2:hover, h3:hover, h4:hover, p:hover {
    color: #fff;
}