How to add and style a button in Squarespace - video tutorial

How to add and style a button in squarespace

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

  1. Open the page or post

  2. Click the insert point and select Button

  3. Update button text

  4. Add a link (either to content on existing site, a file, or external URL)

  5. Change button size and alignment

  6. 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.

  1. From the Home menu, select Design > Style Editor > scroll down to the Buttons section

  2. There will be style options for Small, Medium and Large button blocks

  3. Select the desired style, shape, colour, text colour and font for each sized button

  4. 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.


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