If you caught my first post in the Squarespace CSS series called “Squarespace CSS: what you need to know before you get started” then you’ll remember that everything that lives on your site had to first be coded into existence.

First, using HTML (the language that tells your internet browser’s robots what type of content to include on that page), and then using CSS (the language that tells the robots when, where, and how to display it).

Someone had to do it.

(And thank Squarespace is wasn’t you!)

Yep! Anytime you pick a content block (ie. an image block, button block, or text block), you are basically selecting a pre-built bit of custom code to plug your content into, and Squarespace handles the rest!

Every time you tweak a setting inside that block, like the alignment of your text, or the size of a button, the Squarespace robots are working tirelessly behind the scenes to rearrange your site’s HTML & CSS to match!

But just like any written language, there are rules…

Rules that sometimes limit where we can stick a button, or how many blocks we can drag onto a single row.

But if Squarespace didn’t follow the rules of HTML and CSS when designing their platform, there’d be no way for them to make it the universally user-friendly, drag-and-drop dream that it is.

Everything would be a giant cluster f…free for all, requiring us all to learn to custom code every last detail of our site.

Thankfully, that’s not necessary.

But just like when you are traveling in a foreign country and desperately need to use the bathroom (¿Dónde está el baño?) it doesn’t hurt to know a little bit of the lingo to survive.

Ready to learn a few bits of CSS to help you bust out of the drag-and-drop box?

THE BEST Free CSS PLUGINS for your SQUARESPACE buttons & forms

1. How to make your buttons the same fixed width in Squarespace using CSS.

Method of CSS injection used: Universal

Okie dokes, so you know how when you go to add a button in Squarespace and the width automatically resizes based on how much text you try to fit in that one button?

Here’s a quick example of two button blocks I’ve added that use the exact same settings.

As you can see, the one with the fewer characters is wayyyy smaller than it’s wordier cousin!

Good news!

If symmetry happens to be design a pet peeve of yours, and you want all your buttons to be the exact same width no matter the content, you’ll be all set with this tutorial from Lemon and the Sea!

You can peep a preview of what this bit of CSS does below!

Add an image to a button in Squarespace using CSS

METHOD OF CSS INJECTION USED: UNIVERSAL

Squarespace gives you just a few options for customizing your buttons in the built-in site styles editor.

And while they certainly get the job done, it’s possible your biz’s online home calls for something just a little more creative than the old standbys!

This CSS trick for adding custom images or backgrounds to your buttons comes to us straight from the goddess of Squarespace CSS herself! (Becca from Inside the Square!)

The image you use could be literally anything as long as it’s still obvious that it’s a button (or at least something clickable) so go ahead and go wild!

3. Add multiple form block items to one line in Squarespace using CSS

Method of CSS injection used: Universal

When you add a form block to your site, Squarespace’s default for dealing with all those fields is a stacked layout.

Depending on how much info your form needs to collect, having everything sit one on top of the other like that can make for some pretty long (read: boring) looking forms.

If you’re looking for a way to force two or more form items onto a single line on the page, lovely past Square Secrets & Square Secrets Business course student Rebecca Grace has got you covered with this tutorial!

(Looks harder than it is, promise! )

I tested this handy CSS trick for myself and here’s the result!

 

4. Add a floating or sticky ‘book now’ button in Squarespace using CSS.

Method of CSS injection used: Universal

Want your most important call-to-action to follow your visitor wherever they scroll on your site?

Thirty Eight Visuals has got you covered (for both desktop and mobile!) with this CSS code snipper for adding a sticky book now button to your site!

Here’s an example of what that could look like!

(P.S. look familiar? Yep! This is the mockup site I use inside my Square Secrets Course! Good eye!)

5. How to change the font color & style in forms in Squarespace using CSS

Method of CSS injection used: Universal

Ready for the realest blog post title on the internet?

“How to Make Your Squarespace Contact Form Look Less Ugly”

Not even joking. That’s a real tutorial. (And honestly just the one you’ve been searching for!)

Ericka over at Big Cat Creative totally lives up to her name with this awesome step-by-step for swapping out those less than exciting form fonts for something that totally fits with your site’s unique vibe!

Here’s a quick little form I whipped up as an example! (But you do you, friend!)

 


 

6. How to add a button anywhere on your Squarespace site using CSS (a.k.a create a button from a link)

Method of CSS injection used: Universal & Inline

Remember when I mentioned earlier how all those rules that Squarespace’s drag-and-drop feature needs to follow can at times feel a bit limiting?

Adding button blocks is one of those times!

If you’ve ever felt frustrated by the way your buttons align or are automatically spaced, Minimist is spilling the CSS secret you need to stick a button anywhere on your site!

Here’s what creating buttons from text/links can do for you!

(Heads up! the following buttons will all automatically stack on mobile, so desktop viewing is best for this little illustration!)

 

Example #1:

So say I want to left align two buttons one on top of the other under this bit of text.

Example #2:

What happens when I try to stick two button blocks on one row and try to have them left align with my text?

I *could* try to move them around by sticking in a few spacer blocks and resizing the two columns Squarespace automatically created when I dragged the two blocks side by side…

Thanks to the margins I’ve set so my text doesn’t run wall-to-wall on my site, things are still not quiteeee lining up!

So let’s use the CSS from Minimalist’s tutorial instead!

7. Add a custom ‘Pin It’ button to your Squarespace site using CSS

Method of CSS injection used: Universal & Code Injection (FOOTER)

Squarespace makes it pretty dang easy to link up your new site to all the other places you show up online!

But if you’ve dropped some dough on custom branding, or spent hours making sure every last corner of your site is cohesive & on-brand, you probably won’t love being stuck with the generic default icons for other well-known sites and social platforms.

(They don’t exactly go with the decor, amiright?)

So if that bright red ‘Pin It’ button is currently killing your vibe, I found just the tutorial you need for swapping it out for something a little more you.

And this one’s coming atcha from Station Seven!


8. How to add a gradient to a button in Squarespace using CSS

Method of CSS injection used: Universal

I had so much fun playing with the text gradients in Squarespace CSS: 10 tips for customizing your site’s fonts & text blocks that I just knew I had to get my hands on a gradient button tutorial for ya’ll as well!

This tutorial from Mary at Maryphillip.com is pretty straightforward and simple, so without further ado, here’s what it can ‘ado’. (See what I did there?)


9. Change button color on hover in Squarespace using CSS (with drop shadow)

Method of CSS injection used: Universal

Button animations are a fun way to surprise and delight site visitors and make for a more interactive experience!

It’s like that scene in Elf where a full grown Will Ferrel presses allll the buttons in the elevator so they light up in the shape of a Christmas tree.

We never lose that inner child that loves pressing buttons and watching the magic happen!

Here’s a tutorial from JacobCruiz.com to bring the magic of hover-effect buttons to your site!

(Oh and here’s a sneak peak of what that looks like, btw!)


10. Change newsletter block button color & font in Squarespace using CSS

Method of CSS injection used: Universal

Newsletter blocks can be handy little list-building machines!

And thanks to this tutorial from June Mango, they just got a whole lot more on brand!

She actually gives the code snippets for customizing both the button andddd the form fields in your newsletter form.

So if you delete out the title and description from inside the form, and add a text block above to do your talking, you can pretty quickly and easily make these generic little forms a heck of a lot more fun!

A screenshot of the form bit for your previewing pleasure!

You’ll also love . . .

Squarespace CSS: 10 tutorials for styling your site’s buttons & forms