In a Squarespace blog, you can have a link under each article on the post list page that says Read More.

This link directs people to the individual post, but I think it’s so boring! It’s just a simple line of text with an underline, and you can make it look much more clickable with a little clever code. 😉

The tutorials below will show you how to customize this link so it looks like an actual button, and how to replace the text Read More with your own words.

A quick pro tip! You can install these codes site wide BUT if you only want to see these changes on one individual blog on your site, click on the gear icon to access your blog settings menu, click the advanced option at the bottom of the list, and paste these codes into the page header code injection (third option) between two style brackets like this: <style> code here </style>

Create a Button Style for the Read More Link

This code will remove the read more text underline that shows up in Squarespace automatically:

.blog-more-link:after{display:none}

This code will add a border to the read more link, and change up the spacing so it looks more like a button:

.blog-more-link {border: 1px solid #000; padding: .5rem!important; margin-top:.5rem}

This code will make the read more link stand out on a hover, turning the text white and the background black.

.blog-more-link:hover{color:#fff; background:#000}

Change the Read More Text to Anything You Want

This first code will turn the read more text into the font size 0 so it won’t be visible: 

.blog-more-link {font-size:0rem!important}

This code will remove the read more text underline that shows up in Squarespace automatically:

.blog-more-link:after{display:none}

And this final code is where you can change the text! Anything inside the quotes will be displayed on your Squarespace blog, replacing the words Read More.

.blog-more-link:before{content:"check it out"; font-size: 1rem}