How to Customize the Read More Link on Squarespace Blog Post Excerpts

Tired of the boring, default "Read More" link on SquareSpace blog excerpts? 

I was too!

That's why I'm showing you the exact CSS that I created to customize my Read More link and how you can customize it to match your brand! 


Here's what my Read More link looks like now:

And here's what it looks like when you hover over it:

Let's get started! 


How to customize your Read More link:

1. Log in to your Squarespace account

The two easiest ways to log in to your Squarespace site are to go to your website URL and press the "Esc" key on your keyboard or to put "/config" to the end of your URL. 


2. Select Design

Once you're logged in, go to the "Design" section.


3. Select Custom CSS

Then select the "Custom CSS" link on the left panel.


4. Input this CSS 

You'll see a blank text field that will allow you to insert custom CSS. Go ahead and copy and paste the code that I actually use on mine right now: 


.entry-more-link a:not(.sqs-block-button-element) {
  color: #222 !important;
  background-color: #fff;

.entry-more-link a:not(.sqs-block-button-element):hover {
  color: #000 !important;
  background-color: #ffd000;


.entry-more-link {
width: 100%;
height: auto;
padding: 0px;
background-color: #fff;
border: 1px solid #222;
font-family: "Montserrat", "Open Sans", sans-serif;
font-size: 14px;
line-height: 2.75em;
font-weight: normal;
font-style: normal;
text-transform: uppercase !important;
letter-spacing: 2px;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
margin-top: 25px;

.entry-more-link:hover {
border: 1px solid #ffd000;

Now let's go through what this CSS actually means so that you can easily (and quickly!) change it to match your brand and what you want it to do. 


Formatting the actual "Read More" text:


Formatting the area around the "Read More" text:


5. Edit, Preview, and Tweak 

Your style likely isn't just like mine! So play with each line and see how it affects your website in action. 

My favorite part of Squarespace is that it allows you to test and play!

If you aren't sure what one line of code does, change the number or text and see what changes. Then you'll know exactly what it affects! 

Some simple things to start with tweaking are:

  • Fonts

    • Replace "Montserrat" with the font you're using on your site!

  • Font sizes

    • Tweak the size of the font but be sure to keep "px" in there as that is the measurement for pixels

  • Colors

    • Colors in CSS refer to hex codes

    • You can find a great directory of hex codes here or you can pull the hex code from your "Design" section by seeing what colors are currently on your site

  • Border sizes

    • You can put 0px instead of 1px to remove the border entirely


Once you like what you see, you're done! :)