How to Customize the "View Event" Button on Your Squarespace Event List with Cool Hover Effects!
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!
Here are the codes used in this tutorial. Be sure to edit the values to suit the style of your own website.
👀 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