Free Tool

Button Style Generator

Create custom button styles for your Squarespace site. Adjust colors, borders, padding, hover effects, and shadows — then copy production-ready CSS.

Why this matters

Your website buttons are your most important conversion tool — they're what people click to buy, book, or contact you. Default Squarespace buttons are fine, but custom-styled buttons can increase click-through rates dramatically. This tool lets you design the perfect button visually.

Colors

Border

0px
0px

Padding

32px
16px

Typography

14px
1px

Hover & Transition

300ms

Box Shadow

Pro

Unlock full button customizer

Live Preview

Preview Background

Presets

Generated CSS

.custom-button {
  display: inline-block;
  padding: 16px 32px;
  background-color: #000000;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 300ms ease;
}

.custom-button:hover {
  background-color: #000000;
}

Where to add custom button CSS in Squarespace

  • Custom CSS panel — Go to Design → Custom CSS and paste the Squarespace CSS output. Changes apply site-wide instantly.
  • Dev Mode (LESS file) — Add the generic CSS to your base.less or a dedicated buttons.less file listed in template.conf stylesheets array. No !important needed in Dev Mode — use proper specificity instead.
  • Code Block — For page-specific overrides, wrap the CSS in <style>...</style> inside a Squarespace Code Block.