How To Line Up Squarespace Buttons Side by Side
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.
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.
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.
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 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>
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.
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.
FORMATTING TO KNOW
The buttons in this article are medium-size. You’ll see the following class assigned to the <a…> elements:
You can also create small and large buttons. Simply specify small or large in the class name. For example:
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.