Use CSS to Put Buttons Anywhere

Jul 26

Button blocks in Squarespace are a super easy and convenient way to add a good-looking and consistently stylized button to your page. The convenience of Squarespace also comes with some limitations that sometimes make ostensibly easy tasks difficult.

Let's look at an example:

This is a real-life example that I encountered on the home page of my own website.

It should be easy to put two buttons side by side—but it isn't because of how blocks are distributed into columns. On top of that, the content indent that I've set globally on my site to increase whitespace makes it so that text doesn't line up with side-by-side blocks, like this:

Learn more

Project Gallery

These two button blocks are both left justified and evenly spaced, but trying to put the second button closer to the first pushes the text in the first button onto two lines if the page is resized:

Learn More

Project Gallery

Both of those solutions look really bad. Wouldn't it be wonderful if we could just put buttons wherever we wanted them? Like this:

Learn More Project GallerY ⟶

Oh wait. We can!

Here's how it's done:

The two buttons in the third example are not actually button blocks. They are simply text styled with CSS to include a border and a background colour on hover. The advantage of this is that it allows you to put a button in any place that allows for text input.

CSS

You can put this in your sitewide custom CSS box (Design > Custom CSS), or in the page header code area.

If you put it in the page header, make sure to paste it between style tags (<style> PASTE CODE HERE </style>).

Style tags tell the browser that it is a CSS modification and not a <div> or a <script>. I've added comments to each line to attempt to explain what's happening.

/* This targets links(a) the 'h3' heading style in a specific text block, 
you dont have to isolate it to a singe text block.
I did because I only want the modification in this article */
#block-yui_3_17_2_1_1532579407564_37882 h3 a:link, h3 a:visited {
  color: #6C7A89; /* button text colour */
  border: 1px solid #6C7A89 !important; /*button border width and color*/
  padding: 20px 30px; /*button height and width*/
  margin-bottom: 15px; /*space after if they end up stacked on mobile*/
  text-align: center; /*centers the text*/
  text-decoration: none; /*defines underline, strikethrough, etc.*/
  display: inline-block; /*hard to explain, but required*/
  -webkit-border-radius: 3px; /*rounds the corners, set to 0 for square (chrome/safari)*/
  -moz-border-radius: 3px; /*rounds the corners, set to 0 for square (firefox)*/
  border-radius: 3px; /*rounds the corners, set to 0 for square (IE)*/
  -webkit-transition: 0.35s background-color linear, 0.35s color linear; /*speed of colour transition on hover*/
  -moz-transition: 0.35s background-color linear, 0.35s color linear; /*speed of colour transition on hover*/
  -o-transition: 0.35s background-color linear, 0.35s color linear; /*speed of colour transition on hover*/
  transition: 0.35s background-color linear, 0.35s color linear /*speed of colour transition on hover*/
}
#block-yui_3_17_2_1_1532579407564_37882 h3 a:hover, h3 a:active {
  background-color: #6C7A89; /*hover background color*/
  color: #FFF !important; /*hover text color*/
}

Other Applications

Like I mentioned before, you do this in any place that has linkable text. like an index gallery for instance.
If you had a linked text on an image in a Brine family index gallery, it would only be underlined. To change that underlined text you could target it and change it into a button:

.Index-gallery-item-content-body a{ /* this modifies the index gallery and 'a' targets links */
  PASTE CODE HERE;
} 

This may be complicated to someone who doesn't know anything about CSS, but it's really quite simple once you understand the basics. I'm happy to assist anyone who has questions. Leave a comment if you need to add a custom button to your Squarespace website.