How to Fix Your Squarespace Buttons (CSS Snippets Inside)
Everything you can do with buttons in Squarespace using the native editor and a little bit of custom code
Pro tip: Want to improve your website conversions? Use more buttons and logical calls to action.
Squarespace has a built-in collection of button designs, but sometimes they seem pretty limiting.
The platform just recently added a bunch of new button shapes to the mix – now you can add oval, underline, and petal-shaped buttons (on top of the standard square, rounded, and pill shapes).
While we love the Squarespace platform for its simplicity, a lot of button options are still clearly missing. In this post, we are showing you how to style your Squarespace buttons using a little bit of easy custom code – to make your buttons more conversion-friendly and consistent across your whole website.
Understanding how buttons work in Squarespace 7.1
There are four types of buttons in Squarespace 7.1:
A button as a stand-alone block (it can be added to any page if you click a plus sign when editing a page)
A button as a part of the image layout that consists of an image, text, and a button. There are 5 image layouts available (card, collage, overlap, poster, and stack). You can add these as a block to any page (by accessing the block menu). More about what you can do with image blocks here.
A button as a part of a form or newsletter block
A button as a part of a list section – this is a section type that has a bunch of different settings to create layouts
All of these button types inherit the master settings that we apply through the Site Styles menu.
Go to Site Styles → Buttons. In this menu, you can select the button shape and it will apply to your entire site. You can also change the button padding and it will apply to the whole website with some exceptions.
Changing the colors of your buttons
Squarespace 7.1 introduced a streamlined way to apply colors. Go to Site Styles → Colors. Here you can set up a color palette that will automatically apply to your entire website. Squarespace will also generate 10 section themes – 10 unique color profiles that apply to different sections of your website. When you enter the page editing mode, click the pen icon at the top right corner of each section to can change a color theme of a particular section.
To change a color of a particular button (or any other block whatsoever), go to Site Styles → Colors and click on a color theme of an appropriate section. You’ll see a list of blocks and their colors. You can change the color to anything you want – you are not limited to your initial palette and can choose any custom color.
Changing the button font
The logic here is similar: Go to Site Styles → Fonts. You can set up master fonts that will apply to your entire site as well as to all buttons. Your buttons will by default inherit the paragraph style. If you’d like something more custom, Go to Site Styles → Fonts → Buttons and change the font option to “Custom”. Now you can select a custom font and its properties (size, letter spacing, weight, etc). These settings will apply to all buttons that are standalone blocks and buttons in image layouts.
You can customize the buttons of forms and newsletter blocks by going to Fonts → Assign styles. This menu will show settings for some other blocks, including forms. Just keep in mind that you need to add a form block to your website before accessing this menu.
Fixing common Squarespace button problems with CSS
After we are done applying the native styles to buttons, we usually find that our buttons are somewhat inconsistent. We want them to behave in a certain way – for example, to be the same size on mobile. Or, for instance, there are three size options for button blocks – small, medium, and large – but there’s no way to apply different colors or padding to them, just a font size.
Let’s fix some of these issues via custom code.
Color buttons in different colors based on button size
Apply different colors to solid buttons based on button size. Change the background color hex code in the snippet below with your own. Paste this code into Website → Website Tools → Custom CSS. New colors will apply to all section themes. You can change the color for small, medium, and large buttons. If you’d like to change the color of the text, you can do that through the color themes panel in the Site Styles tab.
// Color buttons in different colors based on a button size
// Buttons
div[class^="sqs-block-button-container"],
.image-button,
.image-button.sqs-dynamic-text {
a {
// Small buttons
&.sqs-block-button-element--small {
background-color: #FFFFFF;
}
// Medium buttons
&.sqs-block-button-element--medium {
background-color: #FF9230;
}
// Large buttons
&.sqs-block-button-element--large {
background-color: #DBDCEB;
}
}
}
Change the button color in the newsletter block
Change the HEX code in the following snippet and add it to Website → Website Tools → Custom CSS.
// Newsletter block buttons
.newsletter-block {
.newsletter-form-button-wrapper {
.newsletter-form-button {
color: #FFFFFF !important;
background-color: #FF9230 !important;
}
}
}
Make all buttons the same width on mobile
Add more consistency to your design – make all your buttons the same width on mobile. Let's say that using the Site Styles → Buttons menu you set the width of your Primary buttons to 2rem. If you then add a button block and set it's design to be "Fit", those 2rem is the maximum width you will get for all your primary buttons across the website, mo matter how large you make containers holding those buttons. While this can work great on desktop, on mobile you might feel limited. Quick solution is to make buttons stretch full screen width on mobile, which is exactly what we achieve with the snippet below. Notice we are only targeting Primary buttons - you will need to edit the code below to also target Secondary and Tertiary buttons.
// Make buttons 100% wide on mobile (except form and list section buttons)
.sqs-block-button {
a.sqs-button-element--primary {
@media only screen and (max-width: 767px) {
width: 100%;
}
}
}Want to also make all your form buttons and list section block buttons stretch full screen width on mobile? Here's the snippet for that:
// Make form and list section buttons 100% wide on mobile
.newsletter-form-button-wrapper,
.newsletter-form-button-wrapper button,
.form-button-wrapper button,
.list-item-content__button {
@media only screen and (max-width: 767px) {
width: 100% !important;
text-align: center;
}
}Fix disproportionate button sizes in image layouts (Classic Editor Only)
Squarespace 7.1 removed the dynamic text option for buttons in image layouts (card, stack, collage, overlap, and poster). As a result, the default buttons in these blocks usually look disproportionately big. If you want to create a consistent, polished website design, all buttons should be the same size.
The following snippet does several things:
Changes the font size
Applies minimal width to all buttons in image layouts: 150px
Applies new padding to all buttons
Make all these buttons 100% wide on mobile
// Image card block buttons, only for Classical Editor blocks
.image-button,
.image-button.sqs-dynamic-text {
font-size: 1.3em !important;
a {
min-width: 150px;
text-align: center;
padding: 1.5rem 4rem !important;
@media screen and (max-width: 768px) {
padding: 1.5rem 0 !important;
min-width: 100%;
width: 100%;
}
}
}
We hope this was helpful! Show off your websites in the comments below.
Need a few tweaks to your Squarespace website? Struggling with customizing your template? If you need help implementing this code on your site, you can sign up for a website tweaks and tutorial session here.
Interested in learning Squarespace web design? We have an awesome Squarespace masterclass!
