Squarestuff

Squarestuff

Share this post

Squarestuff
Squarestuff
Can you spot a Squarespace website a mile off?
Copy link
Facebook
Email
Notes
More
User's avatar
Discover more from Squarestuff
Web development, motion graphics, tech and all kind of other stuff!
Already have an account? Sign in

Can you spot a Squarespace website a mile off?

Plus a free button and other stuff

Carl Johnson's avatar
Carl Johnson
Jul 10, 2023

Share this post

Squarestuff
Squarestuff
Can you spot a Squarespace website a mile off?
Copy link
Facebook
Email
Notes
More
Share

Have you ever looked at a website and before you even peep into dev tools, you think ‘This is Squarespace’?

Some elements of Squarespace are so distinctive I can recognise them as quickly as I can identify my own children in a schoolyard full of …other children.

The default cookie notice is one thing that’s a big give away. You enable it in the settings and you move on, annoyed that you’ve just pissed off 99% of your users with a worthless obligation to click an ‘Accept’ button.

Then there’s the favicon! No one ever changes it from that little cube thing.

I know you’re probably reading this now thinking “haha! I changed the favicon on my clien …shit! I forgot about the cookie thing”.

Another thing that’s a big Squarespace giveaway are the buttons. They always look the same. Always! I don’t know what it is, but again, they stand out like one of my kids in one of those horrible Norovirus-ridden adventure playgrounds.

I think my biggest gripe with Squarespace’s buttons, though, lies with the lack of customisation. Want a gradient background? An icon in the button? A cool hover effect? Well you can forget about it! Natively at least anyway.

So, I was messing around in Webflow the other day and I built this button:

In Webflow it’s not a big deal - link block with a couple of divs inside, a bit of styling applied and a hover interaction. It all takes a couple of minutes.

But in Squarespace, you couldn’t make something like this without writing lines and lines of code.

Luckily, Webflow allows you to export code to use elsewhere. I’ve done it in the past to quickly make complex layouts and interaction to use in Squarespace…

…so that’s what I did with this button. So if you want to use it in your Squarespace project, first you’ll need to add a Code Block to your page and in the Code Block add the following HTML:

<center>
<a href="YOURURL" class="button-wrapper"> 
<img src="https://raw.githubusercontent.com/MrJohnoCP/images/39501e7b4792d83354bd0015be7cfc775f34f95d/arrow.svg" class="button-icon">  
<div class="button-text">Learn More</div>
<div class="button-bg">
</div>
</a>
</center>

You can change “YOURURL“ to point to the page you want the button to link to. You can also change the Learn More text to something else.

Then you need to add the CSS to your site-wide code injection (header), which Squarespace has recently moved to ‘Setting > Developer Tools > Code Injection’

<style>
.button-wrapper {
 width: 165px;
 text-transform: uppercase;
 border: 1px solid #fff;
 border-radius: 100px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 padding: 10px;
 font-weight: 600;
 line-height: 1;
 text-decoration: none;
 position: relative;
 overflow: hidden;
 transition: .5s ease;
}
.button-icon {
 z-index: 1;
 position: relative;
 transform: rotate(-360deg);
 transition: .5s ease; 
}
.button-text {
 z-index: 1;
 color: #fff;
 margin-right: 10px;
 position: relative;
}
.button-bg {
 width: 29%;
 height: 100%;
 background-image: linear-gradient(#ed7321, #d15f23);
 border-radius: 100px;
 position: absolute;
 left: 0;
 transition: .5s ease;
}
.button-wrapper:hover .button-bg {
 width: 100%;
 transition: .5s ease;
}
.button-wrapper:hover .button-icon {
  transform: rotate(360deg);
  transition: .5s ease; 
}
</style>

And that’s it!

Feel free to mess around with the hex colours, transition speed, width etc.


Poll

It’s been a while since Squarespace launched Fluid Engine and I’m intrigued what people think of it.

Subscribe to Squarestuff to vote on this poll
Only subscribers can vote on this poll.
Already a subscriber? Sign in
POLL

What do you think of Fluid Engine?

Love it!
50%
Hate it!
25%
Haven't used it.
25%
4 VOTES · POLL CLOSED

Update

It’s been a busy couple of months, so I haven’t had much chance to put out any videos over on YouTube, but I’ve got some planned soon.

As always, I’d love to know if there are any videos you like me to put out. You can comment on this post, DM me on Twitter or send me an email.

If you missed the last video you can see it here👇


Show your support 🤜🤛

Buy me a coffee

Share

Share this post

Squarestuff
Squarestuff
Can you spot a Squarespace website a mile off?
Copy link
Facebook
Email
Notes
More
Share

Discussion about this post

User's avatar
How to Add Locomotive Scroll (SMOOTH SCROLL) To Squarespace
If you’re unfamiliar with locomotive scrolling it’s a cool effect where, when you stop scrolling, the page briefly carries on and then slowly comes to a…
Nov 24, 2022 • 
Carl Johnson

Share this post

Squarestuff
Squarestuff
How to Add Locomotive Scroll (SMOOTH SCROLL) To Squarespace
Copy link
Facebook
Email
Notes
More
My Go-To Resources
I often get asked what I’m using for a certain things.
Feb 24, 2023 • 
Carl Johnson

Share this post

Squarestuff
Squarestuff
My Go-To Resources
Copy link
Facebook
Email
Notes
More
How to show mobile menu on desktop in Squarespace 7.1
One of the biggest things missing from Squarespace 7.1 is the mobile breakpoint option.
Mar 16, 2023 • 
Carl Johnson

Share this post

Squarestuff
Squarestuff
How to show mobile menu on desktop in Squarespace 7.1
Copy link
Facebook
Email
Notes
More
3

Ready for more?

© 2025 Carl Johnson
Privacy ∙ Terms ∙ Collection notice
Start writingGet the app
Substack is the home for great culture

Share

Copy link
Facebook
Email
Notes
More

Create your profile

User's avatar

Only paid subscribers can comment on this post

Already a paid subscriber? Sign in

Check your email

For your security, we need to re-authenticate you.

Click the link we sent to , or click here to sign in.