Jump to content

Custom button hover states that match each theme color: Is it possible?

Recommended Posts

Posted (edited)

Hi all. I want my global button hover state to use theme colors, not static colors. This way, the button hover states will match the active theme's unique button colors.

Specifically: a button with a LIGHT background, DARK text, and DARK border would reverse on "hover" to a DARK background with a DARK border and LIGHT text.

Does anyone know how to replace static hex or RGBA colors with dynamic theme color variables? Here's what I'm hoping for:

/* change global button hover state */
.sqs-block-button-element:hover,
.sqs-button-element--primary:hover,
.sqs-button-element--tertiary:hover {
 background-color: VARIABLE-THEME-BUTTON-BACKGROUND-COLOR !important;
 border-color: VARIABLE-THEME-BUTTON_BORDER_COLOR !important;
 color: VARIABLE-THEME-BUTTON-TEXT-COLOR !important;
 opacity: 1 !important; /* no hover fade */

Any ideas would be appreciated!

Edited by birdmade
Link to comment
  • Replies 1
  • Views 186
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.