Centering Squarespace Buttons

Centering just one call to action button is easily done in Squarespace. But what if you have multiple buttons, and you want them in a row and centered as a group. That's a harder task, and I present in this post a fun hack to help you solve it. 

The Problem

Imagine writing a post about wheel sizes for mountain bikes. You aim to capture reader interest and motivate readers to dig beyond the surface of what is a contentious and fad-driven topic. You issue a call to action with a button like this one:

Centering just one button is easy. I've 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. Job done!

Centering is a more interesting problem when two or more buttons are involved. Change your goal to that of getting readers to make a choice between two up-and-coming sizes that are pushing the traditional 26-inch wheel off the market. Now your call to action involves two buttons:

The look here might not be what you're after. Both buttons are centered, but they are each centered in their own half of the display width. You prefer the buttons closer together and centered as a group.

A Failed Hack

One hack that almost works is to align the left-side button to the right, and the right-side button to the left. This has the effect of pushing the two buttons together in the center of the content. If you carefully write the button text to the same number of characters for each button, you can fake the effect of centering the buttons as a group. For example:

This approach falls apart fast. Just make your browser window narrower. Try it now. Narrow your window to mimic the size of your mobile phone display. You''ll see the buttons stack on top of each other and fly to opposite sides of the content area. The approach is not extensible beyond two buttons, and it's not easy to write button text to the same number of characters and width. A different solution is needed. 

A Successful Solution

A solution that works is to take Squarespace's HTML for a Button block, and to use a modified form of that HTML in a Code block to generate as many buttons as you need in a group. Here's how that approach plays out:

  1. Place one button on your page.
  2. Copy the HTML generated for that button.
  3. Paste the HTML into a Code block.
  4. Modify the HTML slightly, and replicate part of it for each button that you need.
  5. Delete the Button block placed in Step 1.

This approach is extensible beyond two 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 Go 29er button shown just above. You can find the HTML by pressing CTRL-U to view this page's HTML source. Then search on the text "Go 29er". Find the second occurrance, and back up just a bit until you find the first of the enclosing div elements for the Button block.

<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_10_1_1_1397998943922_173603">
<div class="sqs-block-content">
<div class="sqs-block-button-container--right">
<a href="http://twentynineinches.com/" class="sqs-block-button-element--medium sqs-block-button-element" >Go 29er</a>
</div>
</div>
</div>

Pasting this HTML into a Code block is the trick. Drop a Code block onto your page. Paste in the above HTML. Then make the following modifications:

  1. Remove sqs-block from the list of classes in the outermost div element. Your Code block will itself be an sqs-block. You don't want to nest one sqs-block inside another.
  2. Remove any id attributes that are present. Alternatively, you can replace any Squarespace-generated id values with ones that you make up yourself. 
  3. Remove the class attribute from the innermost div element. You'll be centering the buttons yourself, so it's best to avoid referencing the Squarespace-generated alignment class. 
  4. Write a style attribute into the <a...> tag and specify whatever margin you want for your buttons. I've specified margins of 1em in the example to follow.
  5. Write a style attribute into the innermost div element to center the text within that element. The effect will be to center the enclosed buttons as a group. I've specified text-align: center in the following example.
  6. Copy and paste the <a....> tag to create as many buttons as you need.
  7. Modify your copied <a....> tags to point to the correct URLs. 

Following is my result. There are two <a....> tags, one each for 29er and 650b. Each tag points to a URL that is appropriate for the choice being made. The margins of 1em provide visual separation between the buttons when they are left-and-right from each other, and also when they stack up in the mobile view. The innermost div centers the enclosed buttons as a group.

<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="http://twentynineinches.com/" class="sqs-block-button-element--medium sqs-block-button-element" >Go 29er</a>
<a style="margin: 1em;"
href="http://650bpalace.blogspot.com/" class="sqs-block-button-element--medium sqs-block-button-element" >Go 650b</a>
</div>
</div>
</div>

You can just begin with the HTML shown here. Steps 1 through 5 are done for you, and you can focus on Steps 6 and 7. Figure 1 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

Copy and paste the HTML into a Code block. Modify the button text and link targets. Copy-and-paste 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 as a group. Here's the final result

You can adjust the margin settings as needed to get the precise spacing that you like. The buttons are identical to those generated by the Button block. You can narrow your browser window, and these will eventually stack up vertically while remaining centered. 

Some Formatting

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 Style Editor. Click the paintbrush icon to get there, and scroll down to the Button Block settings. You'll be able to specify rounded corners, pill-shaped buttons, and probably a few other options depending upon your chosen template.

And Sew On

The fundamental problem at the beginning of this article is that each button is being centered within its own, independent space. That's the behavior you get when you drop Button blocks onto a page, and it's perfectly reasonable behavior too. Sometimes though, you do want to center a block of buttons as a single unit. That's also reasonable, and the hack in this article provides an approach that works toward that end.

Note: You can choose to write your buttons entirely from scratch. Kris Black shows how to do so in his article Create a Simple Call to Action Button. An advantage to the approach I describe is that you can still use the Style Editor to style the resulting buttons, and they will be consistent in appearance with any that you create through the Squarespace Button block. An advantage to Kris's approach is that you can style your buttons without being limited to the built-in choices.


Learn CSS for Squarespace 7
9.99

Learn CSS for Squarespace 7 is a seven-chapter introduction to working with CSS on the Squarespace platform. The book is delivered as a PDF file that is readable from any Windows or Mac – or even Linux! -- computer. A complimentary sample chapter is available. Try before you buy.

View the complete description for more details.

Add To Cart