How to customize buttons in Squarespace
Who said a button has to be a plain ol’ rectangle?
I definitely didn’t! Customizing interactive moments on your website, like your buttons, makes for a memorable and unique user experience. It is truly these little changes that we can make on our website that will wow visitors.
These little customizations are something you might want to think about, especially if you are a web designer. If you can find a few little unique tweaks to make on your website, someone shopping for a web designer might see features and go, “Wow that is so cool! I want her to do that on my website!” Hired! It really could be that simple!
In my opinion, if there is one thing that makes a Squarespace website look cookie-cutter, it is the buttons having absolutely no customization. It seems like such a small thing, but to me, it is very obvious. It can make a website look completely flat.
At the end of the day, in sea of other websites and web designers, it is important to find small ways to stay stand out!
With that being said, let’s customize those buttons!
I will be showing you how to create your own unique button design and how to replace the boring old square or pill style button with your new personalized design! This tutorial does include a little CSS code but don’t worry, it is copy and paste. I’ll be here to walk you through every step!
First, let’s hop on over to Canva to create our unique button design. If you’ve never used Canva, it’s free and really easy to use! Once you’ve signed up and signed in, the first thing you are going to want to do is to create a new design. a good size for a button is between 40px-100px.
Feel free to play around until you have a design you like. For mine, I added text and an arrow element. The nice thing about Canva is that it has a bunch of free graphics to choose from under the elements tab. If there is a certain element you are looking for, you can search it in the search bar. Once you have a design you like, click the download button! Make sure your file is a PNG. If you want your button to have a transparent background, be sure to check the transparent background box.
After you have your button design dowloaded, let’s head back over to Squarespace. In edit mode in Squarespace, find an insert point where you would like to add a button.
Once you have added a button, hover over the button and click edit. Changes you will want to make to the button right away include, deleting the text, adding the button link, and make sure you are using the large button format.
Save your settings then exit out of edit mode. Now, we are going to head over to the Custom CSS window. You can find the Custom CSS window under the Design tab. It is the very bottom tab under Design.
The first thing you will want to do once you have opened the Custom CSS window, is upload you custom button design! Scroll down in the Custom CSS window and click the button that says ‘Manage Custom Files’. There you will see an arrow button to upload your file.
Once you have your file uploaded, It’s time to add the CSS! Start by pasting the code below into the CSS window. Once you have the code pasted delete image-url and add your file URL.
Note - Do not delete the parentheses or the quotation marks.
To add your image URL, place you cursor in between the quotation marks, go back to ‘Manage custom Files’ and click on the file that you have uploaded. Once you click your file, the image URL will automatically fill in wherever you placed your cursor. If it is not working, be sure to check that you have both parentheses and both quotation marks.
If your design is being cropped, you will want to change the height and the width to match the original height and width you set for your design.
.sqs-block-button-element--large.sqs-block-button-element { background: url('image-url'); color:#ffff; text-align: center; border: none; height: 45px; width: 100px; }
Once you have it working, click save and you should have a working customized button! you can still go back and edit the button link as usual by hovering over the button and clicking edit. There is a chance that your button may still have some settings that are not working with your design. If your design doesn’t quite look exactly how you design, go over to site styles, click on your button, and play around with the settings until your design looks exactly how you like!
Now you look like a complete Squarespace pro with your unique customized buttons! Yay to no cookie-cutter design! If you are interested in learning more code snippets or other Squarespace tips, feel free to take a peek at my other Squarespace Blog Posts. If you have questions or have ideas for other things you would like to learn, drop a comment below!
I also highly recommend checking out this detailed Squarespace Review from The Style Factory. This post shares the ins and outs, pros and cons of Squarespace, and all its features! If you are still wondering if Squarespace is a good fit and want to get an overview of everything it has to offer, this review will be very valuable!
