FUN CODE SNIPPETS FOR SQUARESPACE
3D BUTTON DESIGN
.sqs-block-button-element--small.sqs-block-button-element {
background-color:#3b3b3b;
color:#ffffff;
box-shadow: 4px 4px #e7ff01;
}
.sqs-block-button-element--small.sqs-block-button-element:hover {
background-color:#e7ff01;
color:#000000;
box-shadow: 4px 4px #3b3b3b;
}
→ This code is intended to overwrite the SMALL Squarespace Button. So if you enter this into your CSS panel, it will overwrite all SMALL buttons around your site with these settings. If you want it to overwrite the Medium or Large buttons, you can change where it says “small” in both sections of the code to either “medium” or “large”.
→ Your font settings for this button will be found and can be edited in the Style Settings under the SMALL button block settings.
→ The first section of code is for the visible button, the second section is for when you hover over the button.
→ You can change the background colors of the visible and the hover button by editing the color hex code after “background-color:”.
→ You can change the font colors of the visible and the hover button by editing the color hex code after “color:”.
You can change the shadow color of the visible and the hover button by editing the color hex code after “box-shadow”.
HOW TO ADD IT:
→ For this code to work, you will need to have at least 1 “Small” button on your Squarespace site.
→ Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to any Small buttons around your site.
→ Make sure when you are editing the color codes that you don’t remove any other characters accidentally as this will break the code.
COLOR CHANGING BUTTON
→ Code Snippet:
.sqs-block-button-element--small.sqs-block-button-element {
background-color:#aa8dda;
color:#ffffff;
-webkit-transition: 3s;
transition: 3s;
}
.sqs-block-button-element--small.sqs-block-button-element:hover {
background-color:#03ddbd;
color:#ffffff;
-webkit-transition: 3s;
transition: 3s;
}
HOW TO USE IT:
This code is intended to overwrite the SMALL Squarespace Button. So if you enter this into your CSS panel, it will overwrite all SMALL buttons around your site with these settings. If you want it to overwrite the Medium or Large buttons, you can change where it says “small” in both sections of the code to either “medium” or “large”.
Your font settings for this button will be found and can be edited in the Style Settings under the SMALL button block settings.
The first section of code is for the visible button, the second section is for when you hover over the button.
You can change the background colors of the visible and the hover button by editing the color hex code after “background-color:”.
You can change the font colors of the visible and the hover button by editing the color hex code after “color:”.
You can change the speed at which the button changes to the hover color by changing the “-webkit-transition:” and the “transition:”. Right now is is set to 3s (which is 3 seconds) but you can change this number to how ever many seconds you like!
HOW TO ADD IT:
For this code to work, you will need to have at least 1 “Small” button on your Squarespace site.
Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to any Small buttons around your site.
Make sure when you are editing the codes that you don’t remove any other characters accidentally as this will break the code.
HOVER HIGHLIGHTS ON REGULAR PAGE LINKS
p a {
border-bottom: solid 2px #edaea2 !important;
}
p a:hover {
border-bottom: solid 2px #edaea2 !important;
background: #edaea2 !important;
}
HOW TO USE IT:
You can change the actual color of your links in the Style Settings under “Colors: Links”
The first section of code is for the visible link, the second section is for when you hover over the link.
You can change the type, width and color of the border by editing the settings after “border-bottom:”.
You can change the color of the border underline by changing the color hex code after “border-bottom:”.
You can change the color of the hover highlight by changing the color hex code after “background:”.
HOW TO ADD IT:
This code will only affect basic links in your body text on your pages.
Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to any body links you have around your site.
Make sure when you are editing the codes that you don’t remove any other characters accidentally as this will break the code.
ADD A COLORED DROP-SHADOW TO YOUR SOCIAL LINKS
If you are using the Social Links block anywhere around your site, you’ve probably noticed that if gives you two color options. “Light” or “Dark”. (Boring!)
.sqs-svg-icon--wrapper {
box-shadow: 2px 2px #e8a8a0;
}
HOW TO USE IT:
You can change the depth of the shadow by adjusting the 2px and 2px after “box-shadow:”. Increasing the number (eg 5px 5px) will make the shadow bigger.
You can change the color of the shadow changing the color hex code after “box-shadow:”.
HOW TO ADD IT:
This code will only be applicable if you are using the “Social Links” Block around your site.
Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to any body links you have around your site.
Make sure when you are editing the codes that you don’t remove any other characters accidentally as this will break the code.
FADE IMAGE LINKS ON HOVER
a:link img {
opacity: 1.0 ;
filter: alpha(opacity=100);
}
a:hover img {
opacity: 0.5;
filter: alpha(opacity=60);
}
HOW TO ADD IT:
This code will only be applicable if you have images that are linked on your site.
Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to any body links you have around your site.
