Neumorphic Button System for Squarespace 7.1

Squarespace Code SnippetsSquarespace CSS

Oct 6

No coding knowledge required. No plugins. No design experience.

Turn boring buttons into tactile UI under 60 seconds.
COPY. PASTE. DONE.

What is Neumorphic Button System?

This is a ready-made CSS button system that gives your Squarespace site a modern neumorphic design — the same soft, tactile style used in high-end product UIs.

Buttons look raised by default
Buttons feel pressed when hovered or clicked
Everything inherits your site’s background color
Fully customizable with simple variables

Perfect For:

Anyone tired of default Squarespace buttons
All creators and modern entrepreneurs
Designers using Squarespace
Founders launching products

What Neumorphic Button System Does

Soft elevation (raised buttons)
Realistic pressed states
Clean, modern, “Apple-level” polish
Interactive feel:
- Hover = pressed into the surface
- Click = deeper press
- Subtle motion that feels physical, not fake

How it works (2 steps):

Open Squarespace → Website → Pages → Scroll the panel down to Custom Code → Custom CSS
Paste the code - done.
(If you decide to go back to your previous settings, just remove the code.)

Your buttons instantly upgrade across:

Button blocks
Forms
Header CTA buttons
Product / “Add to Cart” buttons
Works perfectly on light greys, whites, neutrals
Inherits your background automatically

What You Can Customize (if wished)

- Soft & modern
  --neu-radius: 18px;
- Sharp & minimal
  --neu-radius: 10px;
- Full pill buttons
  --neu-radius: 999px;
- Fast & snappy
  --neu-transition: box-shadow 0.15s ease, transform 0.1s ease;
- Smooth & elegant
  --neu-transition: box-shadow 0.3s ease, transform 0.2s ease;
- Gentle press
  --neu-pressed-ambient-dark: inset 0 6px 12px rgba(0,0,0,0.18);
- Strong press
  --neu-pressed-ambient-dark: inset 0 10px 20px rgba(0,0,0,0.28);
• Pure black
  --neu-text: #000000;
• Soft grey
  --neu-text: #444444;
• Dark grey (softer than black)
  --neu-text: #2f2f2f;
• Brand-aligned (example)
  --neu-text: #1a5cff;
• Muted / subtle
  --neu-text: #666666;
• Shallow press
--neu-active-ambient-dark: inset 0 6px 12px rgba(0, 0, 0, 0.22);
• Deep press
--neu-active-ambient-dark: inset 0 12px 24px rgba(0, 0, 0, 0.32);
- Subtle / minimal
  --neu-raised-edge-dark: 0 4px 6px rgba(0,0,0,0.18);
- Balanced (default)
  --neu-raised-edge-dark: 0 4px 6px rgba(0,0,0,0.28);
- Bold / high contrast
  --neu-raised-edge-dark: 0 4px 6px rgba(0,0,0,0.36);
- Compact
  --neu-pad-y: 14px;
  --neu-pad-x: 28px;
- Standard (recommended)
  --neu-pad-y: 22px;
  --neu-pad-x: 40px;
- Large CTA
  --neu-pad-y: 28px;
  --neu-pad-x: 56px;