How to style read more links for the basic Grid in Squarespace 7.1

The "Read More" link in Squarespace’s basic blog grid layout often comes with default styling that might not align with your site’s visual identity. With a few simple tweaks using custom CSS, you can transform this link into a branded and interactive element that encourages clicks and improves the overall look of your blog feed.

In this tutorial, we’ll walk you through how to style the "Read More" links in your blog grid layout on Squarespace 7.1, including options for font, color, spacing, hover effects, and even icons.

Table of Contents

• Why Style the “Read More“ Link

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Style the "Read More" Link?

Custom styling helps you:

• Match the link to your brand design

• Make the call to action more compelling and visible

• Differentiate links from body text

---

Step-by-Step Instructions

Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below

// BASIC GRID BLOG button
.blog-basic-grid  .blog-more-link {
  background-color: #005E4F; /* Green */
  border-radius: 10px;
  color: #ffffff !important;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-top: auto;
  padding: .5em 1em;
}

// To remove the underline
.blog-basic-grid .blog-more-link:after {
  display: none;
}

---

Step 2: To have a hover effect, add the code below.

// Button hover effect
.blog-basic-grid  .blog-more-link:hover {
  background-color: #000000; /* Black */
}

---

Key Takeaways

• Use .blog-basic-grid .blog-more-link to target the link in the blog grid layout.

• Customize font, spacing, color, and hover effects to match your brand.

• Use media queries to fine-tune for mobile devices.

FAQs

Will this affect the “Read More” links on other parts of my site?
This will only affect links that use the .blog-basic-grid .blog-more-link class, which is primarily used in basic blog grids.

Can I replace the text “Read More” with something else?
A: While you can't do this directly with CSS, you can use JavaScript or modify the link text manually in summary blocks if you're using custom content.

---

---

Conclusion

Styling your "Read More" links is a small but impactful way to polish the look of your Squarespace 7.1 blog. Whether you’re going minimalist or bold, a little CSS goes a long way in improving both design and user engagement.

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.