How To Line Up Squarespace Buttons Side by Side

How to line up buttons side by side in Squarespace. A simple coding solution.

Have you ever faced the frustration of trying to make something work while designing a website and it’s doing everything except the one thing you want it to do? Talk about serious annoyance!

Yesterday, while working on a new Squarespace website design, I spent an inordinate amount of time trying to get three button blocks to line up the way I wanted – centered, close together, and in a particular spot. No matter what I tried, it just wouldn’t line up. They would overlap, or have too big of a gap, or two of them would line up and the third one wouldn’t, and on. I tried to sweet talk it, then yell at it…a little good cop/bad cop but nothing worked.

Don’t judge. I know you talk to your computer, too. Right? Tell me I’m not the only one.

As a website designer, versus a website developer, I typically try to avoid coding if I can as it’s not my favorite part of designing a website. However, there are occasions where it can’t be avoided, especially if you want to add custom design to certain aspects of the website. This was one of those times.

The Problem

Imagine writing a section on your website about any topic. In my case, it was an author’s book blurb and quote about the book. Below this, I wanted to issue three call to action buttons to purchase the book at different places.

Centering just one button is easy. I created this button by dropping a Button block onto the page. Centering is as easy as choosing “Center” from the drop-down list of alignment choices.

Centering becomes a more interesting problem when two or more buttons are involved. My goal was to show all of the places you can purchase the author’s book. Now my call to action involves three buttons:

This is not the look I wanted! The buttons are centered, but they are each centered in their own half of the display width. I wanted the buttons closer together and centered as a group.

I attempted one hack that almost worked which is to align the left-side button to the right, and the right-side button to the left. This had the effect of pushing the two outside buttons together towards the center button. If you carefully write the button text with the same number of characters in each button, you can fake the effect of centering the buttons as a group. This option failed for two reasons. As you can see, the words in each of my buttons didn’t have the same amount of characters, therefore they didn’t line up quite the way I wanted them to. Second, when I adjusted the size of my browser window to mimic the mobile display, the buttons no longer lined up.

Enter massive frustration and a bit of cursing.

THE SOLUTION

Enter the custom coding solution! Trust me, it is simple and anyone can do it, even those who don’t have a lot of experience with coding.

One of the benefits of Squarespace is that we can drop a Code Block anywhere on our website page. You can use the Code Block to add custom code to a page, blog post, sidebar, or footer. This is a good option if you want to embed third-party widgets or customize a page beyond what’s possible with other blocks, such as my failed button blocks alignment. The Code Block supports HTML, plain text, Markdown, and CSS code surrounded by <style></style> tags. The only thing you can’t do is add JavaScript or iframes to a Code Block unless you subscribe to a Website Business plan or higher as it’s a premium feature.

You can use this coding approach for any amount of buttons and works well in desktop and mobile views. The buttons generated are indistinguishable from those created using a Button block, because the very same formatting is applied.

Following is the HTML behind the Amazon button shown above.

<div class="button-block sqs-block-button" data-block-type="53">

  <div class="sqs-block-content">

    <div style="text-align: center;">

      <a style="margin: 1em;"

         href="https://www.amazon.com/Hows-Feel-Tough-Guy-Prisoner/dp/0989530108/" class="sqs-block-button-element--medium sqs-block-button-element" >Amazon.com</a>

</div>

Pasting this HTML into a Code Block is the trick. Drop a Code Block onto your page where you want the buttons. Paste in the above HTML. Then make the following modifications:

1.      In the <div style="text-align: center;"> tag, replace the “center” alignment with either left or right, or leave it at center if you desire. The effect will be to align the enclosed buttons as a group.

2.      In the <a…> tag, specify whatever margin you want for your buttons. I’ve specified margins of 1em because I wanted the buttons closer together. The higher the number for the margins, the farther apart the buttons will be.

3.      Copy and paste the <a…> tag to create as many buttons as you need.

4.      Modify your copied <a…> tags to point to the correct URLs.

5.      Modify your copied text where it says “Amazon” to write what you want it to say on the button.

You can begin with the HTML shown above. Figure 1 (below) shows the above code as it should be pasted into a Code Block.

 
Figure 1. The solution code as it appears when pasted into a Squarespace Code block

Figure 1. The solution code as it appears when pasted into a Squarespace Code block

 

Copy and past the HTML into a Code Block. Modify the button text, link targets, and margins. Copy and past the <a…> tags to make as many buttons as you need.  The solution works because it places all buttons into the same div element where they can be centered (or left or right aligned) as a group.

Here’s my final result for what I was trying to achieve with my buttons. They are left-aligned with a .1em margin and “small” buttons style.

Left aligned Squarespace buttons small code block

FORMATTING TO KNOW

The buttons in this article are medium-size. You’ll see the following class assigned to the <a…> elements:

sqs-block-button-element—medium

You can also create small and large buttons. Simply specify small or large in the class name. For example:

sqs-block-button-element—small

sqs-block-button-element—large

Other aspects of button formatting are controllable from the Site Style Editor found in your Design menu. Scroll down to the Button Block settings. You’ll be able to specify rounded corners, pill-shaped buttons, and potentially a few other options depending upon your chosen template.

And there you have it! A simple way to center and align your buttons the way you want without a time suck or hassle.

What, if any, other frustrating problems are you having with designing a website on Squarespace?


Ready for a modern & refined website to tell your brand’s story?

Are you ready to reach the next level of success?

Let’s make it happen!


Kat Collins is a Squarespace Website Designer focused on helping you share your brand’s story via your website to take your business to the next level. On the blog, you’ll find a variety of topics that help you succeed in online business, such as website design, branding, social media strategies, blogging, email marketing, Squarespace design tips, and more.