How to Customize the "View Event" Button on Your Squarespace Event List with Cool Hover Effects!

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

When you create an event collection in Squarespace, you’ll find the view event button is designed to match your primary button style. Using the editing features built into Squarespace, we can’t change it, but with a little custom CSS you can! In this tutorial, you’ll learn how to modify the style of that button with code. We’ll change the background color, text style, and even create a hover effect.

Be sure to watch the video before you get started with the codes below so you know how to use them!

Squarespace Tutorial

Code Example

Here are the codes used in this tutorial. Be sure to edit the values to suit the style of your own website.

.eventlist-button{
font-size:16px!important;
padding: 5px 15px!important;
border-radius: 50px!important;
margin-top: 15px;
background: #e5f5f6!important;
color: #333!important;
border: 1px solid #333!important;
transition: all 1s!important
}
.eventlist-button:hover{
background:#333!important;
color: #e5f5f6!important;
opacity: 1!important
}

---

---

Related Content

👀 How to keep event info visible on a scroll in Squarespace → insidethesquare.co/squarespace-tutorials/sticky-event-info

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

❤️ Support my channel →buymeacoffee.com/insidethesquare

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

🖥️ Learn how to create code for Squarespace → insidethesquare.co/learn

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