In this quick tutorial, learn how to customize the lesson footer in your Squarespace course with CSS! You'll learn how to change the color and position of the footer button and alter the footer's background color to match your site's design.

Why use custom code? The footer background and layout can not be edited directly in Squarespace. The color of the button can, but any changes you make to this button will affect all the buttons assigned to that same style across your entire site. CSS makes it possible for us to make changes that only affect the lesson page.

Here are some time stamps in case you want to jump ahead:

• 00:44 How to change the button style

• 01:18 How to add custom CSS to Squarespace

• 01:27 Custom CSS for the footer button colors

• 02:09 Footer button hover effects for a Squarespace lesson

• 02:40 Center the footer button in a Squarespace lesson

• 03:10 Change the lesson footer background

• 03:47 Next steps & related content

/* change the button colors */

.course-item__footer .course-item__next-lesson-button {
background: #F6EDCE!important;
border-color:#EDD17D!important
}

/* change the button colors on a hover */

.course-item__footer .course-item__next-lesson-button:hover {
background: #fff!important;
color:#333!important
}

/* change the footer background */

.course-item__footer-background{
background:#EDD17D
}

/* center the footer button */

.course-item__footer-content {
justify-content: center;
}

/* align the footer button to the left */

.course-item__footer-content {
justify-content: flex-start;
}