6 fun code snippets for your Squarespace web design
If you know anything about Big Cat Creative, you know we’ve been preaching about the awesomeness of Squarespace for a while now. Squarespace is our fav platform for creating a simple, beautiful website.
But sometimes you just wanna give your website design a little bit of “oomph”, and if you’re not a Squarespace pro, that can be a little bit hard.
So today I’m coming to ya with some fun design elements that I created to give your web design a bit of a fun, easy and free facelift!
These design tweaks come in the form of some simple CSS code. But don’t worry, I’ve made it as easy as possible for you! The codes are mostly just copy + paste and I’ve included instructions on how to customize them for your site.
Let’s jump in!
3D Button Design
This is a fun design that puts a solid dropshadow on your button, and also switches the colors on when you hover over it!
Here is the code, and I’ll break it down for you below:
.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;
}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 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 Fading Button Design
I loveee this button design! I think it’s so moody and fun. You can use different color combinations to produce a variety of different moods for this one. It’s simply just a slow transition from one color to another, but within this slow transition it can create “in-between” colors that can look really cool.
.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 Color on your Footer Navigation
If you’re using the footer navigation in the Brine template, then you probably have noticed how boring it is, and how you can’t customize it much!
But alas, a little bit of simple CSS code can fix that up right away.
To make your footer navigtaion links more interested, here’s a simple code that will add a hover color to them (so basically when you hover over one of the footer nav links, it will change color!)
.Footer-nav-group a:hover {
color: #e8a8a0;
}How to use it:
This code will only work with Brine-family based templates (if you’re not sure if you’re using a Brine based template, check out the list of templates here)
Your font settings for the footer navigation will be found and can be edited in the Style Settings.
You can change the hover color of the footer nav by changing the color hex code after “color:”.
How to add it:
For this code to work you need to be using a Footer Navigation (under Pages). This code will not work for just regular links in your Footer area.
Copy and paste the entire code in to your CSS Panel (Design > Custom CSS) then it will automatically apply to the footer navigation on your Brine-family based 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 Highlight on your Regular Page Links
Check out an example by overing over this link!
A subtle but fun way to add a bit of designer touch to your site is to enhance the regular body/page links. These are the links that you would find in blog posts or just in regular body text.
Here is the code that I have used for the example above::
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”. Which, isn’t very exciting in my opinion!
I love sprucing up my social links with a colored dropshadow! It’s super easy to do.
.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
Example fade on hover:
When you have an image that is linked, it nice to have some sort of indication to your website visitor that is it actually a link — that’s why I like this fading feature. If you don’t have this, it may not be obvious that the image is actually a link, and people might not click on it, which isn’t good!
Luckily, this is a simple fix:
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.
I hope you enjoyed this post and that you use some of these fun and simple CSS codes for your Squarespace site!
Make sure to check out some of our other quick code tricks for customizing your Squarespace site below! 👇
How to customize your Squarespace cookie banner design
How to animate your links on hover in Squarespace 7.0 & 7.1
How to create a sticky header nav in Squarespace
How to add a background color to a text block in Squarespace
How to Make Your Squarespace Contact Form Look Less Ugly
If you liked this post, Pin it to Pinterest! 👇🏻
