MODULE SIX: LESSON TWO
Styling Buttons
Buttons are one of the most important interactive elements on your website. they direct readers to take action, like buying your book or signing up for your newsletter. Styling them well helps your site look polished and makes your calls-to-action stand out.
Step 1: Global Button Styles
Your template already has global button styles set up, so in most cases you won’t need to change anything. All of your buttons will automatically match your brand’s colors, fonts, and sizing.
However, if you’d like to customize them further:
Open your Squarespace editor and go to the Site Styles panel.
Find the Buttons section.
From here, you can adjust:
Font → Choose a typeface that matches your overall brand.
Size → Large enough to read clearly on desktop, but still mobile-friendly.
Shape → Decide whether you want square edges, rounded corners, or pill-shaped buttons.
Colors → Pick background and text colors that feel cohesive with your brand palette.
Step 2: Ensure Buttons Are Easy to Use
Make sure buttons are large enough to tap easily on mobile devices.
Place buttons in uncluttered spots so they stand out visually.
Step 3: Write Effective Button Text
Keep text short, clear, and action-oriented. Examples:
Buy Now
Read More
Subscribe
Download Bonus Chapter
Use consistent styles across your site so visitors instantly recognize clickable buttons.
Make sure button colors are high contrast against the background so they always stand out.
Action Steps
Know that your global button styles are already set. you don’t need to adjust them unless you’d like to.
Test buttons on mobile to confirm they’re large and easy to tap.
Add hover effects or subtle animations for polish.
Keep button text short, clear, and focused on the action you want readers to take.
Double-check that all buttons are easy to see and consistent across your site.
