Turn Read More Link into a Button | Squarespace 7.1

What does this code do?

In this post, I show you how to remove the underline from the Read More Link. However, the link may look a little lost. This code snippet will allow you to customize the Read More link on Blog Pages in Squarespace 7.1 to look like a button.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Read More Blog Link */
.blog-more-link {
  border: 2px solid #a8a6a1;
  padding: 10px 20px; /* top/bottom  right/left spacing */
  border-radius: 30px; /* for rounded change to 10px; for square delete this line */
  background: #a8a6a1; /*background color */
  color: white !important; /*font color*/
}

.blog-more-link:hover {
  background: #9e9c98; /*background colour on hover */
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the spacing, colours, and shape to match the buttons on your Squarespace Website.