How to Change "View Event" Button Text on a Squarespace Event List Page

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About This Tutorial

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

The event collections in Squarespace are a great way to organize a scheduled of events, but the view event button is pretty boring. You can customize the style of it with code, but you can also change the text too! In this tutorial, you'll learn how to use custom CSS to change the view event button text into your own custom call to action.

Squarespace Tutorial

Code Example

Here are the codes used in this tutorial. Be sure to edit the margin values, and the font and text properties to suit the style of your own website.

.eventlist-button {
  font-size:0!important
}
.eventlist-button:after{
  content:"LEARN MORE →";
  font-size:16px!important
}

---

---

Related Content

📝 Original blog post → insidethesquare.co/squarespace-tutorials/view-event-button-text

🔣 Unicode character list→ insidethesquare.co/unicode

📺 Customize view event button style → insidethesquare.co/squarespace-tutorials/view-event-button-style

↔️ Full Width Event Page: Squarespace Design Hack → insidethesquare.co/squarespace-tutorials/event-page

📅 How to customize event date tags in Squarespace → insidethesquare.co/squarespace-tutorials/custom-event-dates

❤️ Support my blog → buymeacoffee.com/insidethesquare

📖 Learn how to use Squarespace → insidethesquare.co/start

🙋‍♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help