buttons

basic buttons

Squarespace is simple for folks to use without any code knowledge, but sometimes custom code is needed to work around its layout limitations or integrate with third-party functionality.

usage

To use custom code elsewhere, edit the custom code block you wish to use, copy its contents, then — important! — close the code block without saving. Finally, paste your copied content into a new custom code block where you need it.

editing

This is the type of code you will find in all of the button code blocks. Only the class names differ which control whether the buttons are small, medium, or large. After pasting, update the href="" with your links and update the button text found between the <a></a> tags.

Feel free to delete the code for Button Three from your pasted content if you only need only two buttons. More than three buttons are not recommended.

Keep button text as short as possible to minimize button text wrapping in narrow viewports.

<div class="sqs-block button-block sqs-block-button">
  <div class="sqs-block-content">
    <div class="sqs-block-button-container--center">
      
      <!-- Begin Button One -->
      <a href="" class="sqs-block-button-element--small sqs-block-button-element" style="margin: 1em">Button One</a>
      <!-- End Button One -->
      
      <!-- Begin Button Two -->
      <a href="" class="sqs-block-button-element--small sqs-block-button-element" style="margin: 1em">Button Two</a>
      <!-- End Button Two -->
      
      <!-- Begin Button Three -->
      <a href="" class="sqs-block-button-element--small sqs-block-button-element" style="margin: 1em">Button Three</a>
      <!-- End Button Three -->
      
    </div>
  </div>
</div>

examples

Small buttons

Medium buttons

Large buttons

common button groups

View/Book/Buy buttons

healcode buttons

HealCode StandAlone “Buy Now” Button

To place a HealCode “Buy Now” link that looks like a Squarespace button, paste the HealCode “Buy Now” link code (found in the HealCode link manager) into the text field of the Squarespace button block.

HealCode side-by-side buttons

Start with the side-by-side button code. Replace the entire <a></a> tag with the HealCode “Buy Now” link code (found in the HealCode “Buy Now” links manager).  Add the “class” and “style” attributes for the button size you wish to the <healcode widget> tag.  In the example below, “class” and “style” attributes for medium size buttons were added to the <healcode widget>tag.

<div class="sqs-block button-block sqs-block-button">
  <div class="sqs-block-content">
    <div class="sqs-block-button-container--center">
      
      <!-- Begin Button One -->
      <healcode-widget class="sqs-block-button-element--medium sqs-block-button-element" style="margin: 1em" data-type="pricing-link" data-version="0.2" data-site-id="378" data-service-id="2341" data-inner-html="60-Minute Massage" data-link-class="healcode-buy-now-link"></healcode-widget>
      <!-- End Button One -->
      
      <!-- Begin Button Two -->
      <healcode-widget class="sqs-block-button-element--medium sqs-block-button-element" style="margin: 1em" data-type="pricing-link" data-version="0.2" data-site-id="378" data-service-id="2106" data-inner-html="90-Minute Massage" data-link-class="healcode-buy-now-link"></healcode-widget>
      <!-- End Button Two -->
      
    </div>
  </div>
</div>ck button-block sqs-block-button">
  <div class="sqs-block-content">
    <div class="sqs-block-button-container--center">
      
      <!-- Begin Button One -->
      <healcode-widget class="sqs-block-button-element--medium sqs-block-button-element" style="margin: 1em" data-type="pricing-link" data-version="0.2" data-site-id="378" data-service-id="2341" data-inner-html="60-Minute Massage" data-link-class="healcode-buy-now-link"></healcode-widget>
      <!-- End Button One -->
      
      <!-- Begin Button Two -->
      <healcode-widget class="sqs-block-button-element--medium sqs-block-button-element" style="margin: 1em" data-type="pricing-link" data-version="0.2" data-site-id="378" data-service-id="2106" data-inner-html="90-Minute Massage" data-link-class="healcode-buy-now-link"></healcode-widget>
      <!-- End Button Two -->
      
    </div>
  </div>
</div>