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!

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!



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

Get started with the free email course and have your website up and running in no time!

Lybs

Ever dreamed of launching your own Squarespace website, but aren't sure where to start?

This free email course will teach you everything you need to know!

Sign up now and get lesson one delivered straight to your inbox!

Powered by ConvertKit

Charlotte O'Hara

Vancouver