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 some timestamps in case you want to skip ahead to a specific part of this Squarespace tutorial:
00:58 Changing the font size and color
1:42 Adjusting the button shape and padding
03:19 Adding a background color and border
03:43 Creating a cool hover effect that changes color on mouseover
04:53 Slowing down the hover effect for a smoother look
For more creative code ideas, check out the related videos linked below.
Here are the codes from this tutorial:
.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:
📝 Original blog post → insidethesquare.co/squarespac...
↔️ Full Width Event Page: Squarespace Design Hack → insidethesquare.co/squarespac...
📅 How to customize event date tags in Squarespace → insidethesquare.co/squarespac...
❤️ Support my channel → buymeacoffee.com/insidethesquare
📖 Learn how to use Squarespace → insidethesquare.co/start
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥ #SquarespaceTutorial #SquarespaceTraining #eventmanagement #eventplanning #onlineevents #eventmarketing#SquarespaceTips #WebsiteDesign #BeginnerFriendly #FreeTraining #LearnSquarespace #WebDesignTutorial #SquarespaceHelp
#NewToSquarespace #SquarespaceSupport
1 июл 2024
