Since moving my domains over to Squarespace, I've been diggin' it – smart, flexible, simple. While I appreciate that Squarespace hides a lot of the layout CSS to keep newer folks from destroying the simplicity, it would be nice if button styles were accessible via the Appearance Editor.

The Files

Here I've compiled two files with all of my notes about Squarespace buttons to date.

Squarespace Button Selectors (CSS)
Squarespace Button Methods (CSS)

The Selectors

The .button class targets all Squarespace buttons. With the help of the Web Developer toolbar (a Firefox plugin) I've narrowed down the selectors for the following buttons:

• "Log In"  (all)
• Search ">>" (all, page, widget)
• Email / custom forms "Submit" (all, page, widget)

Discussion and Guestbook pages, as well as the Post a Comment form, use the following buttons:

• "Create Post"
• "Preview Post"
• "Confirm Post"
• "Make Changes"

The Methods

I've tested three methods of working with Squarespace buttons:

Method 1: Repeat-X with System Text

This is the easiest method for targeting all Squarespace buttons. It allows you to customize font color and size, border color and size, normal and hover background images, and height. This method is the cleanest to implement because width continues to be controlled by Squarespace defaults.

Method 2: No repeat with System Text

This method is best when you want rounded corners. It uses the normal and hover background images for height, width, and border and allows you to set font color and size. The main problem with this method is that the image sets the width. What works for "Preview Post" does not work for ">>".

To understand the possible solutions to this dilemma, you have to understand some of Squarespace's quirks, which I give further down.

One work around is to confine larger buttons to the Content column and target with #Content, and confine smaller buttons to the Sidebar columns and target with #sidebar1 and #sidebar2.

Another solution is to target the longer buttons with the .button class, target "Submit" buttons with the .submit-button class, and target the ">>" button with the .queryButton class.

Method 3: No repeat with Image Text

This method uses a an image with text as a button. Squarespace does not assign unique selectors to all buttons. For this reason, the best and only use of this method would be as a simple way to replace ">>" with "Search".

The Quirks

Like I said, Squarespace does not assign unique selectors to all buttons. This is a problem in two places I've seen.

The Squarespace email form and custom forms both use the .button and .submit-button classes. This means there is no simple way to use a no repeat image with text (method 3) to replace these buttons. Bummer, I really wanted that button to say "Send Email".

While Squarespace assigns unique selectors to the "Create Post", "Preview Post", and "Confirm Post" buttons, the "Make Changes" button is stuck with just the .button class. This means when you want to use a no repeat image with system text (method 2), you will also have to use one of the work aorunds (or suggest another).

Good luck in your button endeavors!