Changing a “read more” link into a button on Squarespace

Someone asked me a question the other day about changing the read more link into a button on Squarespace. 

I personally think this should be a native feature offered by Squarespace but unfortunately it’s not, which means in order to change your read more link into a button on a summary block, you’re going to need to use code. 

To get started you need to head to the design section of your Squarespace site and select custom CSS. Create a new line and paste in the code:

.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {

border: solid 1px #11394D; /*The width and colour of the border. Incrase PX value for thicker and change hex code for different colour*/
padding: 10px; /*How much padding you want the button to have internally*/
width: 60%; /*How much of the summary block item you would like the button to cover, horizontally*/
text-align: center !important; /*Use left, right or center*/
margin-top: 30px !important; /*Margin between button and text above*/
transition: 0.2s; /*Transition speed. Increase for slower, decrease for faster*/
font-family: 'Bebas Neue'; /*Swap Bebas Neue for any other font you wish or delete this line to stick with your default font*/
text-transform: uppercase; /*Use uppercase, lowercase or capitalize*/

&:hover {

background: #11394D; /*Background of the button when user hovers. Change hex value to change colour*/
color: #ffffff; /*Colour of the text when user hovers. Change hex value to change colour*/
transition: 0.2s; /*Transition speed. Increase for slower, decrease for faster*/

}
}

This code targets the summary block, summary items and the read more link and will apply border, padding, width, text alignment, margin, transition and font to the button.

Watch the video

Check out the YouTube video below 👇

By adjusting the CSS code, you can change the size, colour and overall appearance of the button to ensure it matches your website design and branding. 

Edits you can make to the appearance of the button include the text alignment (left, right or centre), the margins and the duration of the transition. You can also select any font from the Adobe font family that’s loaded into Squarespace by switching out ‘Bebas Neue’ for anything you wish. Just follow the guide instructions inside the ‘/* */’ part of the code.

---

📩 Join the inner circle to get exclusive code updates

---

So there you have it, a simple bit of CSS code allows you to easily change the standard read more link on Squarespace summary blocks into a button. 

With some minor adjustments, you can ensure that your new read more button matches the overall design of your website and stands out to users. 

Changing the read more link into a button on Squarespace is a simple process but one that can be super effective in creating appealing and user-friendly designs.

---

Your designer

I'm Sam, an award-winning Squarespace web designer. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email on sam@bycrawford.com or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.

---

Want more?