Today I’m going to show you how to add more than just an overlay shadow on your hover buttons but instead a completely different color on hover.
Sometimes that dark or light overlay can be boring and downplay from the beautiful design you already have. Today’s code is also a super simple CSS Design snippet. If you’re looking for more Squarespace Tips & Tricks Check out all of my posts at Atmospheric Thinking or click here.
Step 1
Go to the design tab and then go to Custom CSS.
Step 2
Copy and paste this code into the Custom CSS Text Box.
.sqs-block-button-element:hover {
//button color//
background-color: #ffffff;
//button font color//
color: #000000;
}KABOOM!! That’s It!
The coding is very simple and this changes all the buttons on the website page. If you’re looking to change the color, all you have to do is change the code after from #ffffff or #000000 and you’re all set!
Now, if you’re looking to change let’s say only the small button configuration or only the medium button configuration, there’s a simple fix by changing the target of the code snippet.
Instead of targeting:
.sqs-block-button-element:hover You’ll add and extra “.sqs-block-button-element—small:hover” to the very end of the target code snippet to just change small buttons. Here’s how it should look:
.sqs-block-button .sqs-block-button-element—small:hover {
//button color//
background-color: #ffffff;
//button font color//
color: #000000;
}If you were trying to target medium or large buttons, you’ll just replace “small” before the hover attribute and KABOOM!
If you like to see the code snippet fully, check out the code below:
Small:
.sqs-block-button .sqs-block-button-element—small:hover {
//button color//
background-color: #ffffff;
//button font color//
color: #000000;
}Medium:
.sqs-block-button .sqs-block-button-element—small:hover {
//button color//
background-color: #ffffff;
//button font color//
color: #000000;
}Large:
.sqs-block-button .sqs-block-button-element—small:hover {
//button color//
background-color: #ffffff;
//button font color//
color: #000000;
}If you’re looking for other Tips & Tricks then check us out at Atmospheric Thinking! As always,
Have a great day, be safe, and stay healthy!
