How To Add A Button To A Video Collection Item

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

---

About This Tutorial

To learn more about video collection pages, check out this tutorial from 2022: insidethesquare.co/video

This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

Squarespace video collections are a great way to organize a library of content, but the options for additional details are seriously lacking; all we can add is text! 😬 In this tutorial, you'll learn how to turn a simple text-based link into a clickable button with some custom CSS.

Squarespace Tutorial

---

Code Example

Here are the codes from this tutorial. Make sure you update important values like the colors to make these codes uniquely yours!

.lesson-item .lesson-details-description a{
  background:#fff;
  color:#333;
  padding: 10px;
  border:3px solid #333;
  font-weight:bold
}
.lesson-item .lesson-details-description a:hover{
  background:#333;
  color:#fff;
}

Want to add your code to an individual video collection? Click on the gear icon for the collection to access your page settings. Under the advanced section, you’ll find the option for page header code injection. Paste this code below so it will include the style brackets you need to add CSS to that page on your site

<style>
.lesson-item .lesson-details-description a{
  background:#fff;
  color:#333;
  padding: 10px;
  border:3px solid #333;
  font-weight:bold
}
.lesson-item .lesson-details-description a:hover{
  background:#333;
  color:#fff;
}
  </style>

---

Related Content

📑 My Squarespace code collection → insidethesquare.co/css

📖 Learn CSS for FREE → insidethesquare.co/learn

❤️ Support my blog with a donation → buymeacoffee.com/insidethesquare

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