How to add and style a button in Squarespace - video tutorial
When you think of buttons, think beyond Benjamin Button and Brad Pitt's adventures in ageing.
Instead, let's talk about buttons in web design/development and how they are one of my favourite Squarespace features!
I use buttons on every single website I build and design for my clients. I love when buttons are styled with a pop of colour and stand alone without surrounding clutter because then they are much more likely to be clicked. Whether we use them on web pages or within a blog post, buttons are a wonderful way to highlight a call-to-action (CTA) that you want people to take.
Buttons can be used in so many ways but here are just a few ideas:
to link to content (either your own website content or an external URL)
indicate a buy or download option
contact the business/website owner
sign up for a newsletter
etc.
If you've ever wanted to add a button to your Squarespace website and style it to match your website's branding, this video tutorial will show you how!
Related: How to add and style buttons on a Squarespace banner image - video tutorial
Note: want to watch more of my Squarespace video tutorials? I've linked to them at the bottom of this post or you can head over to my Youtube channel to binge them now. #aintnoshame
How to add and style a button in Squarespace
In this video you will learn:
How to add a button to a Squarespace page or blog post
How to update the button text
How to change the button size and alignment
How to make the button a link to other content (either to another URL or a different part of your website website)
How to style the button to your desired shape, colour, font, etc. for all sized buttons (small, medium and large)
Video tutorial shows a demo website using Squarespace's Aviatortemplate.
Adding a button to a Squarespace page or post
Open the page or post
Click the insert point and select Button
Update button text
Add a link (either to content on existing site, a file, or external URL)
Change button size and alignment
Save
Styling a Squarespace button
To style site-wide buttons, you must first be on a page or post that contains a button (see above for instructions). Once you have that page or post open, you can then go ahead and style all buttons.
From the Home menu, select Design > Style Editor > scroll down to the Buttons section
There will be style options for Small, Medium and Large button blocks
Select the desired style, shape, colour, text colour and font for each sized button
Save
Related: How to master colour psychology for your brand and website and My secrets to beautiful Squarespace typography (bonus font guide)
Final Thoughts
Squarespace buttons are a way to make your website content POP and get the right content in front of your website visitors. Since people are more likely to pay attention to buttons because of their visual styling, they are a great way to highlight content and use CTAs to support your website goals.
Try adding buttons to your webpage or blog post today and see how well they can work for your Squarespace website!
Now it's your turn to tell me, does your Squarespace make use of buttons? How have you styled them? Did you change out the default colours, size or alignment? I'd love to know so leave me a comment down below!
Want to create your own stunning, professional Squarespace website? I build custom sites and I’d love to work with you. If you’d rather take the DIY route, I highly recommend the online course Website that Wows. It's a simple, step-by-step program designed to help coaches and service-based entrepreneurs create their own client-winning website from scratch. Plus, it's beginner-friendly with no coding required! You can start with a free trial here.
MORE SQUARESPACE TUTORIAL VIDEOS
How to disable the escape key login on your Squarespace website
How to add and remove pages from the navigation in Squarespace
Favicons: how to create one in Canva and upload it to your Squarespace website
How to add related posts to the bottom of Squarespace blog posts
How to connect social media accounts to your Squarespace website
How to easily find out which Squarespace template a website is using
LAUNCH YOUR BEST SITE - FREE ECOURSE
Interested in learning more about what it takes to get a website up and running? Sign up for my free 7 day e-course!
*This post contains an affiliate link