Turn Read More Link on Blog into a Button

Code

3 Apr

If you're using Squarespace and want to give your blog a more branded, professional feel, updating the Read More button is a simple but effective way to improve your site’s design and user experience.

In this quick tutorial, I’ll show you how to style your blog’s Read More link using custom CSS — giving it a button look that fits your brand perfectly.

Why Customise the Read More Link?

By default, Squarespace keeps the Read More link pretty minimal. If you want your blog to feel more polished and aligned with your branding, turning that link into a proper button helps:

Make your blog easier to navigate
Encourage more post clicks
Keep the design consistent with the rest of your site

Add Custom CSS

Head to your Squarespace website, then go to:

Pages → Website Tools → Custom CSS, and paste in the following code:

.blog-more-link {
  background: #000 !important;            /* Background colour – change to your brand black or primary colour */
  color: #fff !important;                 /* Text colour – usually white for contrast */
  border: 2px solid #fff !important;      /* Border colour – match or contrast with the background */
  border-radius: 50px !important;         /* Corner rounding – higher = more pill-shaped */
  padding: 8px 34px !important;           /* Button padding – controls height and width */
  margin-top: 20px;                       /* Space above the button */
  font-size: 1rem !important;             /* Font size – adjust based on your site typography */
  font-weight: 400 !important;            /* Font weight – 400 is regular, increase for bolder text */
  text-transform: capitalize !important;  /* Capitalisation – change to 'uppercase' or 'none' if preferred */
  transition: all 0.3s ease;              /* Smooth animation on hover/focus */
}

.blog-more-link:hover {
  opacity: 0.85 !important;               /* Slight transparency on hover – tweak for more or less effect */
}

.blog-more-link:focus {
  outline: 2px solid #ff6600;             /* Focus outline colour – important for accessibility */
  outline-offset: 2px;                    /* Space between outline and element */
}

Customise to Match Your Brand

Don’t forget to tweak the colours to match your brand style. You can use:

background: for the button colour
border: to add a styled edge
color: for the text colour
outline: for the keyboard focus state (great for accessibility)

Bonus: Make It Responsive

You can even add media queries to adjust padding or font size on mobile if needed. Here's an example:

@media (max-width: 767px) {
  .blog-more-link {
    padding: 6px 20px;
    font-size: 0.9rem;
  }
}

Final Thoughts

This quick CSS tweak is one of the easiest ways to level up your Squarespace blog. A well-styled Read More button keeps things looking intentional and encourages your visitors to click through and read more content — which is exactly what your blog needs to grow.

If you're building or updating your blog on Squarespace and want help making it feel more polished and professional, book a free consultation — I’d love to help.