Can you spot a Squarespace website a mile off?
Plus a free button and other stuff
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.
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👇