Create your own button from scratch in Squarespace
I’m a huge fan of Squarespace and it’s user friendly platform, making it simple to design your website. But sometimes it’s almost too simple to the point you can’t personalize it to fit your brand. Especially now, with the new version of brand colors and limited button color options.
There are a few ways to get around it and whatnot but again, it can also be limited with three different colors. So in this post, I am going to walk you through how to create your own button from scratch. So, let’s get started.
First, we’ll need to select where we want to plus our custom button. For this post, I am going to place it here and link it to Meet Berenice page.
I’m going to select the markdown content block. I love using the markdown block for creating quick codes. You can also do this with the code content block but I’ll show you why I like using the markdown block for this custom codes.
First I’m going to insert plain text:
Click Here
Okay, in order to style our text to look more like a button I want the markdown to know that this text is a code so I am going to wrap it in the following code. Looks the same but no worries we’ll style it in just a bit.
<span style=””> Click Here </span>
Click Here
Perfect. Let’s start styling our button. I want my text to look like a button so I’ll need to add text to the background so I am going to insert a background-color inside the ““ code.
<span style=”background-color:#e4d28c ”> Click Here </span>
Click Here
We’re getting there but now I want more space around the text and I want my button to have the pill style like all my other buttons. I am going to add padding with more padding on the sides and a border radius. You’ll need to play around with the both to get it just how you want it.
<span style="
background-color:#e4d28c;
border-radius:50px;
padding-right:2.5em;
padding-left:2.5em;
padding-top:.85em;
padding-bottom:.85em;
"> Click Here </span>
<span style="background-color:#e4d28c;border-radius:50px;padding-right:2.5em; padding-left:2.5em; padding-top:.85em; padding-bottom:.85em;"> Click Here </span>
Click Here
Perfect! Now we have our button and we just to need to do one more thing. Add the link. Highlight the text you want to hyperlink and at the top menu of the markdown block there is a link icon. Click and add your url or add the following code below.
<a href="your url here">
Voilà! There is your button. If you want to center your button just insert the following code below.
<center> code </center>
Here is the full code. Feel free to copy and paste. No need to head over the css section of Squarespace all of this can be done in the markdown block. This and the fact that you can move it around and not need to change the block id is one of the many reasons I use markdown to insert my codes.
<center><span style=";background-color:#e4d28c;border-radius:50px;padding-right:2.5em; padding-left:2.5em; padding-top:.85em; padding-bottom:.85em;"><a href="your link">Click Here</a> </span></center>
Alright, that’s it for now. Keep a look out for more tips, hacks, and design tutorials like this one!
Ciao Creatives!
-Berenice
